Question

我点击了三次切换，如果用户点击按钮三次，导航就会消失。如果用户只需点击一次甚至两次，它就可以切换。但三次同时使导航在200px上消失。它只需一次或两次点击即可以50px的速度消失。

任何想法为什么？

$("#toggle-button").click(function() {
    var toggleWidth = $('#cgDiv', window.parent.document).width() == 200 ? “50px" : “200px";
    $('#cgDiv', window.parent.document).animate({ width: toggleWidth });
    $('nav').toggle();
});

我尝试在toggleWidth事件中组合切换但是我遇到了相同的3次点击问题，导致导航消失。

$("#toggle-button").click(function() {
    var toggleWidth = $('#cgDiv', window.parent.document).width() == 200 ? “50px" : “200px";
    $('#cgDiv', window.parent.document).animate({
        width: toggleWidth
    }, function(){
        $('nav').toggle();
    });
});

Answer 1

您可以跟踪变量中的隐藏/显示状态。您还应该使用.stop()在再次启动动画之前停止动画。

var shown = false;
$('#toggle-button').click(function() {
    shown = !shown;
    if (shown) {
        $('#cgDiv').stop().animate({ width: '200px' }, function() {
            $('nav').show();
        });
    } else {
        $('nav').hide();
        $('#cgDiv').stop().animate({ width: '50px' });
    }
});

jsfiddle

<强>更新

由于您在评论中提到您不希望用户中断动画，您可以在动画期间禁用该按钮，如下所示：

$('#toggle-button').click(function() {
    var $button = $(this).attr('disabled', true);
    if ($('#cgDiv').width() == 50) {
        $('#cgDiv').animate({ width: '200px' }, function() {
            $('nav').show();
            $button.attr('disabled', false);
        });
    } else {
        $('nav').hide();
        $('#cgDiv').animate({ width: '50px' }, function() {
            $button.attr('disabled', false);
        });
    }
});

jsfiddle

如何组合动画和切换事件？

1 个答案: