Question

嘿所有我试图按顺序调出动画。目前，即使使用延迟功能（这似乎根本不起作用......），下面的代码似乎也会同时将它们全部调出来。

$(".overlayChoice1").delay(500).animate({
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })               
$(".overlayChoice2").delay(500).animate({
    top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(500).animate({
    top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(500).animate({
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })

为了一次执行一个，我需要做什么？

Answer 1

如果您希望动画按顺序发生，则应将每个动画嵌套在先前的complete回调中：

$(".overlayChoice1").delay(500).animate({
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
    $(".overlayChoice2").delay(500).animate({
       top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
       $(".overlayChoice3").delay(500).animate({
         top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
            $(".overlayChoice4").delay(500).animate({
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' });
        })
    })
})

.animate参考：http://api.jquery.com/animate/

Answer 2

您需要将下一个作为回调发送，或使用增量延迟。

回调：

$(".overlayChoice1").delay(500).animate({
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
    $(".overlayChoice2").delay(500).animate({
        top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
        $(".overlayChoice3").delay(500).animate({
            top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
            $(".overlayChoice4").delay(500).animate({
                top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
            });
        });
    });
});

增量延迟：

$(".overlayChoice1").delay(500).animate({
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })               
$(".overlayChoice2").delay(2700).animate({
    top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(4900).animate({
    top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(7100).animate({
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })

Answer 3

  $(".overlayChoice1").animate({ top: '-15px' }, 1700, "easeOutElastic", function() {
    // Animation overlayChoice1 complete.
    $(".overlayChoice2").animate({ top: '-45px' }, 1700, "easeOutElastic", function() {
      // Animation overlayChoice2 complete.
      .....
    } })
  });

Answer 4

就个人而言，我会使用更多DRY implementation来重复这么多代码，并根据前一个动画的完成回调触发下一个动画：

function runAnimations() {
    var cntr = 1, top = -15;
    function next() {
        if (cntr <= 4) {
            $(".overlayChoice" + cntr).delay(500)
              .animate({top:top+'px'}, {duration:1700, easing:'easeOutElastic'}, next);
            ++cntr;
            top -= 30;
        }
    }
    next();
}

jQuery动画顺序延迟

4 个答案: