Question

我发现了一些类似的问题，但我无法将它们与我的问题联系起来。

我正在尝试的是，因为progressLine的宽度是为条形宽度设置动画

这是我的简单代码：

var function1 = $('.progressLine').animate({width:120},500); 
var function2 = $('.bar').animate({width:50,height:50,top:0},500);
$.when(function1).done(function(){
function2;
});

我曾试图用jquery做到这一点，但是它们仍在同时制作动画。那么如何在动画进度线宽度后设置条形宽度动画？

小提琴：http://jsfiddle.net/mDUkL/3/

Answer 1

在jquery中使用动画回调

$('.progressLine').animate({width:120},500 , function() { 

       $('.bar').animate({width:50,height:50,top:0},500);
});

Answer 2

尝试，

var function1 = function(){ $('.progressLine').animate({width:120},500, function2); }
var function2 = function(){ $('.bar').animate({width:50,height:50,top:0},500); }

function1();

Answer 3

var function2 = function() { 
    $('.bar').animate({width:50,height:50,top:0},500);
}

我使用$.Deferred()

略微修改了脚本

var d1 = $.Deferred();

$('.progressLine').animate({width:120},500, function(){
    d1.resolve();
}); 

var function2 = function() {      
    $('.bar').animate({width:50,height:50,top:0},500);
}

$.when( d1 ).then(function(){
    // callback
    function2();
});

http://jsfiddle.net/jogesh_pi/mDUkL/5/

Answer 4

使用jquery .queue()选项对动画进行排队

如何在执行其他功能时执行功能？

4 个答案: