带有延迟管道的jQuery动画? [英] jQuery animation with deferred pipes?

问题描述

我正在尝试将管道用于jQuery脚本中的动画命令.我有18个要依次运行的动画函数，然后需要重置CSS位置，以便可以再次运行动画.

I am trying to use pipes for my animate commands in a jQuery script. I have 18 animate functions that I want to run sequentially, then I need the CSS position to reset so I can run the animation again.

注意:我已更新此代码以按照建议的方式链接命令，新代码为.....

$.Deferred(function(dfr) {
dfr.pipe(function() {
$(".block1").delay(500).fadeIn().animate({"left": "+=600px"}, 2500, "linear") .animate({left: '+=10', bottom: '+=10'}, 100, "linear").animate({"left": "+=27px"}, 100, "linear").animate({left: '+=10', bottom: '-=10'}, 100, "linear").animate({"left": "+=25px"}, 100, "linear").fadeOut().css('background', 'red'); 
$(".block2").delay(500).fadeIn().animate({"left": "+=692px"}, 2870, "linear").fadeOut(); 
$(".block3").delay(4010).fadeIn().animate({"left": "+=29px"}, 250, "linear").fadeOut(); 
$(".block4").delay(4010).fadeIn().animate({"left": "+=10px"}, 250, "linear").animate({bottom: '+=15'}, 100, "linear").fadeOut();
}).
pipe(function() {
$(".block1").css('left', '0px');
}).
pipe(function() {
$(".block1").delay(500).fadeIn(); 
});
}).resolve();

我在 http://上使用了该示例onwebdev.blogspot.com/2011/09/jquery-deferred-objects-and-sequential.html .它对我不起作用.

I have used the example at http://onwebdev.blogspot.com/2011/09/jquery-deferred-objects-and-sequential.html for this. It wont work for me.

有人可以指出我正确的方向吗?

Can someone point me in the right direction?

推荐答案

传递给管道方法的函数应 返回另一个可观察对象" .在这种情况下，您可以简单地传回动画.

Functions passed to the pipe method should "return another observable object". In this case you can simply pass back the animation.

例如:

$.Deferred(function (dfr){
    dfr.pipe(function (){
        return $(".block1").delay(500).fadeIn(); 
    });
}).resolve();

这篇关于带有延迟管道的jQuery动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！