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

嘿，我有一些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); 
    }) 
    }

如果任何人有任何关于此的想法将不胜感激。

来源

2012-03-09 Dips

// 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); 
    }); 
});

来源

2012-03-09 02:53:46 Anber

感谢这工作......良好的工作伙伴 – Dips 2012-03-09 03:04:56

你可以尝试这样的事：

第一个事件：

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

}

来源

2012-03-09 01:43:14

这两个事件在同一时间运行.... – Dips 2012-03-09 02:51:59

我觉得你的做法是一个好主意，但是你需要仅在每个循环完成时将您的状态设置为true最后一项。你可以这样做：

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

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

来源

2012-03-09 01:49:24 elclanrs

调查jQuery.Deferred()。

来源

2012-03-09 01:54:10 SenorAmor

这可以用一个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();

来源

2012-03-09 01:59:37

我试过，但都事件一起跑......你知道为什么吗？ – 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/

来源

2012-03-09 02:23:36 ityler22

您不会知道上一个事件何时完成，因此无法准确达到此目的，只有您可以假定第一个事件的时间间隔并设置超时。 – 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); 
})

来源

2012-03-09 02:44:41 Anber

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

回答

相关问题