プレーヤーの表示・非表示に関するコードです。

HTML側の実装

<!-- プレーヤー -->
<div class='player'>

    <!-- プレーヤーの切り替えアイコンを格納 -->
    <div class='player-block-switch'>

        <!-- 切り替えアイコン -->
        <button class='player-switch'> 
            <span class='glyphicon glyphicon-minus'></span>
        </button>

        <!-- アイコンのポップアップテキスト -->
        <span class='player-popup'>非表示</span>
    </div>

    <!-- 他の要素は省略 -->
    ・・・
</div>

固定のスペースを最小限にしたいので、表示・非表示のアイコンはJavascriptでクラスを変更し、どちらか一方だけを表示しています。

CSS側の実装

Javascriptの処理に関するクラスについて、

/* プレーヤーのレイアウト */
.player {

    /* 文字色 */
    color: #D3D8B0;

    /* 背景色 */
    background-color: #3A362D;

    /* 要素の位置を固定 */
    position: fixed;

    /* 下からの位置を変更 */
    bottom: -70px;

    /* 高さ */
    height: 70px;

    /* 透明度 */
    opacity: .9;

    /* 要素の重なりの順序を指定 */
    z-index: 1;

    /* 幅 */
    width: 100%;
}

初期状態でプレーヤーを非表示にするために、位置をposition: fixedで固定し、heightの値の分だけbottomで下にずらす事で、要素をブラウザの下部に隠しています。

Javascript側の実装

//イベント登録
setEvent: function() {

    //表示切り替えのイベント登録
    $('.player-switch').on('click', this.toggle.bind(this));

    //他の処理は省略
    ・・・
},

//プレーヤーの表示切り替え処理
toggle: function() {

    //表示の真偽を切り替えて値を保持
    var bool = !this.on;
    this.on = bool;

    //プレーヤーの要素を取得
    $player = $('.player');
    
    //表示するのであれば0を、非表示であればプレーヤーの高さを取得
    var height = bool ? 0 : '-' + $player.css('height');

    //プレーヤーのアニメーション
    $player.animate(

        //CSSのbottomの値を新たに設定
        { bottom: height },

        //アニメーションの速度を設定
        'slow',

        //アニメーション後に実行される関数
        function() {

            //アイコンの切り替え
            $icon = $('.player-switch .glyphicon');
            $icon.toggleClass('glyphicon-minus', bool);
            $icon.toggleClass('glyphicon-unchecked', !bool);

            //ポップアップテキストの切り替え
            $('.player-switch')
                .siblings('.player-popup')
                .text(bool ? '非表示' : '表示');
        }
    );
},

プレーヤーを表示する場合、bottom属性の値を0にする事で、ブラウザの下部から立ち上げます。その際にanimate()で動きを付けます。第一引数には、変更するCSSの属性をオブジェクト形式で指定し、第二引数には遷移にかける秒数を、また上記のように文字列でも指定できます。第三引数には遷移の仕方を指定しますが、ここでは省略しています。第四引数に遷移後に実行される関数を指定します。siblings()はセレクタで指定された要素と同階層の要素を引数からマッチさせて取り出します。

URL： ringil-music.com
ライブラリ： Bootstrap 3・JQuery 1.12.4