【jQuery】スマホ用メニューボタン(アニメーション付)(“=” <-> “x”)

.menu-button {
    width: 60px;
    height: 60px;

    background-color: #393D46;
    border-radius: 50%;
    border: none; /* の影を消す */
}

.menu-button .bar {
    /* 横線を引く */
    width: 40px;
    height: 2px;
    border-top: 2px solid #fff;

    margin: 0 auto;

    transform-origin: 50%; /* 回転の基準点はバーの中心 */
    transition: 0.25s;
}


/*
    クリックされたらバーをボタンの中心に移動させた上で
    45度回転させて「x」印にする
*/
.menu-closed .bar-01 {
    margin-bottom: 10px;
}

.menu-closed .bar-02 {
    margin-top: 10px;
}

.menu-opened .bar-01 {
    margin-bottom: 0;
    transform: rotate(-45deg);
}

.menu-opened .bar-02 {
    margin-top: 0;
    transform: rotate(45deg);
}

$(function(){
    $('.menu-button').click(function() {
        var opened = 'menu-opened';
        var closed = 'menu-closed';

        if($(this).hasClass(opened)) { // メニューが開いているとき
            //メニューを閉じる処理
            // ...

            //ボタンの表示を変更 "x" -> "="
            $(this).addClass(closed);
            $(this).removeClass(opened);
        }
        else if($(this).hasClass(closed)) { // メニューが閉じているとき
            //メニューを開く処理
            // ...

            //ボタンの表示を変更 "=" -> "x"
            $(this).addClass(opened);
            $(this).removeClass(closed);
        }
    });
});