Question

我希望三个事件一个接一个地运行，所以第一行结束然后第二行在第三行开始之后开始...所以下一个元素（效果）应该等到上一个效果结束？

由于

原始代码：

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp();
    $('.login_menu_arrow.top').hide();
    $('.login_menu_arrow.bottom').show();
    event.stopPropagation();
});

我的测试不起作用：

来源：A way to chain a sequence of events in JQuery?

1

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp(function() {
        $('.login_menu_arrow.top').hide(function() {
            $('.login_menu_arrow.bottom').show();
        });
    });
});

来源：How do you get JQuery to wait until an effect is finished?

2

$('.login_menu_arrow.top').click(function(event)
{
    $(this).queue(function() {
        $("#login_menu").slideUp();
        $(this).dequeue();
    }).queue(function() {
        $('.login_menu_arrow.top').hide();
        $(this).dequeue();
    }).queue(function() {
        $('.login_menu_arrow.bottom').show();
        $(this).dequeue();
    });
});

Answer 1

您与＃1关系密切，但hide不是动画效果unless you call it with a duration，因此您不使用回调：

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp(function() {
        $('.login_menu_arrow.top').hide();
        $('.login_menu_arrow.bottom').show();
    });
});

请注意，这是有效的，因为您正在为单个元素（#login_menu）设置动画。如果您要为多个元素设置动画，则会多次调用回调（每个元素在完成时调用一次）。如果你动画了多个元素并且在完成所有操作后想要一个回调，那么在开始动画as shown in this example之后你将使用promise。但是你不需要这样做，因为你是动画单个元素。

Answer 2

将持续时间设置为hide()方法以对其进行动画处理：

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp(function() {
        $('.login_menu_arrow.top').hide(400,function() {
            $('.login_menu_arrow.bottom').show();
        });
    });
});

或者您可以使用fadeOut()方法。

Jquery效果在运行之前等待之前完成

2 个答案: