我觉得这是通过" deferreds"解决的问题。或"承诺"我在jQuery中听说过,但是在寻找相关文章并没有完全告诉我我在寻找什么。
我希望能够进行简单的jquery函数调用(如animate()
或slideUp()
),然后在完成时调用另一个简单函数。当然我知道slideUp(400, function(){ //onComplete... });
但是如果你有一大堆动画,那很快就会变得非常毛茸茸。
查看以下jsfiddle: http://jsfiddle.net/ue3daeab/
当您单击第一个按钮时,您会看到我想要实现的视觉效果。但是,我用" cascade hell完成它,"相关的代码是:
$("#clickme").click(function(){
//Cascade hell
$("#my1").slideUp(400, function(){
$("#my2").slideUp(400, function(){
$("#my3").slideUp(400, function(){
$("#my4").slideUp(400, function(){
$("#my5").slideUp(400, function(){
$("#my6").slideUp(400, function(){
$("#my7").slideUp(400, function(){
$("#my8").slideUp(400, function(){
$("#my9").slideUp(400, function(){
$("#my10").slideUp(400);
});
});
});
});
});
});
});
});
});
});
当你点击按钮2时,所有的div都会立即崩溃,这不是我想要的效果。我觉得我应该可以做这样的事情,但显然它不起作用。第二个按钮的相关代码是:
$.when($("#my1").slideUp())
.done($("#my2").slideUp())
.done($("#my3").slideUp())
.done($("#my4").slideUp())
.done($("#my5").slideUp())
.done($("#my6").slideUp())
.done($("#my7").slideUp())
.done($("#my8").slideUp())
.done($("#my9").slideUp())
.done($("#my10").slideUp());
有什么建议吗?感谢。
答案 0 :(得分:3)
为什么不使用简单的id数组来折叠,然后一次折叠一个项目?
$("#clickme").click(function(){
var toCollapse = ["#my1", "#my2", ...];
(function collapse(){
var id = toCollapse.shift();
if (!id) return;
$(id).slideUp(400, collapse);
})();
});
我也用这个例子编辑了你的jsfiddle:http://jsfiddle.net/ue3daeab/2/
答案 1 :(得分:0)
我会做这样的事情: 的 UNTESTED 强>
$.each($('.item', '#container'), function(index, value) {
$(this).delay(50*index).slideUp(400);
});
这样一切都不会一下子发生。