jquery - jQuery + Transit 轮换

Question

我在我的页面中使用jquery-2.0.2.min.js和jquery.transit.min.js。我有一个 id="expand" 的 div，当您单击它时它会在旋转中切换。我的问题是在第二次切换之后，它不会旋转。它只是在第一次点击时旋转。

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

在你的代码中试试这个：

$('#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);
    }
});

Answer 2

过渡旋转功能将旋转设置为 180 度，但它不会将其旋转 180 度。如果你想将它旋转回来尝试在旋转后块中使用 0 度，或者如果你想让它一直旋转（并继续始终顺时针旋转），那么你必须获得当前旋转并每次添加 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;
            });
        }
    });
});