如何在完成前一个事件后运行事件
嘿,我有一些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);
})
}
如果任何人有任何关于此的想法将不胜感激。
// 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);
});
});
你可以尝试这样的事:
第一个事件:
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);
})
}
这两个事件在同一时间运行.... – Dips 2012-03-09 02:51:59
我觉得你的做法是一个好主意,但是你需要仅在每个循环完成时将您的状态设置为true
最后一项。你可以这样做:
var $elms = $('div'),
complete = false;
$elms.each(function (idx, value) {
//...
if (++idx === $elms.length) {
complete = true;
}
//...
});
这可以用一个jQuery Deferred对象来实现:
// initialize the deferred object
var deferred = $.Deferred();
// queue your events
deferred.done(myFirstEvent, mySecondEvent);
// resolve the deferred object to trigger events
deferred.resolve();
我试过,但都事件一起跑......你知道为什么吗? – Dips 2012-03-09 02:46:41
这可能以类似的方式实现目标,以Jquery.Deferred(),但是,你也可以尝试创建使用的setTimeout(包装函数)推迟第二个事件。
setTimeout(function() { function mySecondEvent(); }, 15);
OR你可以尝试Jquery.Delay()
.delay(duration [, queueName])
durationAn整数,指示毫秒数延迟队列中的下一个项目的执行。
queueName包含队列名称的字符串。默认为fx,即标准效果队列。
此处了解详情:http://api.jquery.com/delay/
您不会知道上一个事件何时完成,因此无法准确达到此目的,只有您可以假定第一个事件的时间间隔并设置超时。 – Dips 2012-03-09 02:42:54
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);
})
感谢这工作......良好的工作伙伴 – Dips 2012-03-09 03:04:56