jQuery + Transit rotation

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

过渡旋转功能将旋转设置为 180 度，每次它都不会旋转 180 度。如果你想把它旋转回来，试着在旋转后块中使用0deg，或者如果你想让它一直旋转（并继续始终顺时针旋转），那么你必须获得当前的旋转并每次都添加180度。

斯菲德尔

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