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度。如果你想要旋转它，请在旋转后挡块中尝试使用0deg，或者如果你想让它一直转动（并继续始终顺时针旋转），那么你必须得到当前的旋转并且每次都要加180deg

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;
            });
        }
    });
});