Question

嘿伙计我遇到一些jquery的问题请看下面的代码。我有2个活动在运行。我想要实现的是当第一个事件完全结束然后我想要运行第二个事件。

第一个事件

$("#brand div").each(function(e) {
$(this).delay(600*e).fadeTo('slow',1)
})

第二次活动

$(".b-circle-image a").each(function(ev) {
$(this).delay(600*ev).fadeTo('slow',1);
})

我甚至尝试使用status = false;，但仍无效。

    var checkStatus  = true;
    $("#brand div").each(function(e) {//Display segments in order
      $(this).delay(600*e).fadeTo('slow',1)
      checkStatus = false;
    })
    if(!checkStatus==false){
      $(".b-circle-image").show();
      $(".b-circle-image a").each(function(ev) {//Display circle image in order
      $(this).delay(600*ev).fadeTo('slow',1);
    })
    }

如果有任何人对此有任何想法，将不胜感激。

Answer 1

// You can create deferred object for each fadeTo and resolve it on complete animation callback.
var firstEvent = $("#brand div").map(function(i, el) {
    var dfd = $.Deferred();
    $(el).delay(600*i).fadeTo('slow', 0, function() {
        dfd.resolve();
    })
    return dfd;
});
// Then use $.when function (http://api.jquery.com/jQuery.when/)
$.when.apply(this, firstEvent).done(function() {
    $(".b-circle-image a").each(function(i) {
        $(this).delay(600*i).fadeTo('slow',0);
    });
});

Answer 2

您可以尝试这样的事情：

第一次活动：

return myFirstEvent();

function myFirstEvent() {

$("#brand div").each(function(e) {
$(this).delay(600*e).fadeTo('slow',1)
return mySecondEvent();
})

}

第二次活动：

function mySecondEvent(){

$(".b-circle-image a").each(function(ev) {
$(this).delay(600*ev).fadeTo('slow',1);
})

}

Answer 3

我认为您的方法是一个好主意，但只有当每个循环完成最后一项时，您才需要将状态设置为true。你可以这样做：

var $elms = $('div'),
    complete = false;

$elms.each(function (idx, value) {
    //...
    if (++idx === $elms.length) {
        complete = true;
    }
    //...
});

Answer 4

查看jQuery.Deferred()。

Answer 5

这可以通过jQuery延迟对象来实现：

// initialize the deferred object
var deferred = $.Deferred();

// queue your events
deferred.done(myFirstEvent, mySecondEvent);

// resolve the deferred object to trigger events
deferred.resolve();

Answer 6

这可以通过与Jquery.Deferred（）类似的方式完成目标，但是，您也可以尝试创建一个使用setTimeout（）来延迟第二个事件的包装函数。

setTimeout(function() { function mySecondEvent(); }, 15);

OR 您可以尝试Jquery.Delay（）

.delay( duration [, queueName] )

durationAn integer，指示延迟执行队列中下一项的毫秒数。

queueName包含队列名称的字符串。默认为fx，标准效果队列。

此处有更多信息： http://api.jquery.com/delay/

Answer 7

var queue = [];
$("#brand div").each(function() {
    queue.push(
        function(i) {
            $(this).delay(600*i).fadeTo('slow',1)
        }.bind(this)
    );
});
$(".b-circle-image a").each(function(ev) {
    queue.push(
        function(i) {
            $(this).delay(600*i).fadeTo('slow',1)
        }.bind(this)
    );
});
queue.map(function(el, i) {
    el(i);
})

如何在完成上一个事件后运行事件

7 个答案: