jQuery + транзитное вращение

Question

Я использую jquery-2.0.2.min.js и jquery.transit.min.js на своей странице. У меня есть div с id="expand", и он переключается при вращении, когда вы нажимаете на него. Моя проблема в том, что после 2-го переключения он не будет вращаться. Он просто вращается при первом нажатии.

flag_expand имеет начальное значение 0.

$('#expand').click(function() {

        if (flag_expand == 0) {
            $('footer').transition({
                height: 140
            }, 1000, function() {} );

            $('#expand').transition({
                rotate: '180deg'
            }, 1000, function() {} );

            flag_expand = 1;
        }

        else if (flag_expand == 1) {
            $('footer').transition({
                height: 60
            }, 1000, function() {} );

            $('#expand').transition({
                rotate: '180deg'
            }, 1000, function() {} );

            flag_expand = 0;
        }

});

Answer 1

Функция поворота перехода устанавливает угол поворота на 180 градусов, при этом он не поворачивается на 180 градусов. Если вы хотите повернуть его назад, попробуйте 0deg в блоке поворота назад или если вы хотите, чтобы он вращался полностью (и продолжал всегда вращаться по часовой стрелке), вам нужно будет получить текущее вращение и добавлять к нему 180 градусов каждый раз,

jsfiddle

$(function () {
    var flag_expand = 0;
    $('#expand').on('click', function () {
        if (flag_expand == 0) {
            $('#expand').transition({
                rotate: '180deg'
            }, 1000, function () {
                flag_expand = 1;
            });
        } else {
            $('#expand').transition({
                rotate: '0deg'
            }, 1000, function () {
                flag_expand = 0;
            });
        }
    });
});

Answer 2

Попробуйте это в своем коде:

$('#expand').click(function(e) {

    e.preventDefault();

    if (flag_expand == 0) {
        $('footer').transition({
            height: 140
        }, 1000, function() {} );

        $('#expand').transition({
            rotate: '180deg'
        }, 1000, function() {} );

        setTimeout(function() {

            flag_expand = 1;

        }, 1);            
    }

    else if (flag_expand == 1) {

        $('footer').transition({
            height: 60
        }, 1000, function() {} );

        $('#expand').transition({
            rotate: '0deg'        // Updated
        }, 1000, function() {} );

        setTimeout(function() {

            flag_expand = 0;

        }, 1);
    }
});