Question

我正在运行以下jQuery动画但没有良好的序列流。

下面列出的从上到下依次运行以下动画（fadeTo，animate，fadeTo）的最佳方法是什么。

$(".needGray").fadeTo("slow",0.2);
$(".turnLeft").animate({scrollTop:0}, '500');
$(".needGray").fadeTo("slow",1.0);

Answer 1

在动画之间调用.stop()方法，以防止jQuery在队列中构建它们，这可能会导致动画出现跳跃。

jQuery的默认行为是对每个动画任务进行排队，使其按顺序运行并运行每个动画任务。但很多时候，这个列表有点混乱，每个任务都开始试图踩到前一个。

通过调用.stop()，您可以确保在运行下一个动画之前停止任何正在运行的动画。它可以在每个动画后有效地清除队列，因此永远不会有队列或任务累积。

您可能还会发现使用animate而不是fadeTo会更好，因为我认为animate的处理速度比`fadeTo＆＃39;更快，至少在this benchmark test这对我来说。尽可能将任何线性动画分解为较小的块也是一个好主意;您可以使用循环来设计它，以通过几个较小的步骤增加动画。例如，在您的情况下，您可以运行一个循环来执行needGray +0.2的不透明度，5次，并且仅在第一次迭代时处理scrollTop的附加动画。

这是一个简化的例子..

＆＃13;

var $i = 1;
$("#start").hover(function() {
       
    setInterval(function() {
           
       while ($i <= 5) {
           $('.needGray').animate({'opacity':$i/4});
           if ($i == 1) {
               $('.turnLeft').stop().animate({'margin-left':150},500);
           }
           $i++
       }
    },250);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="needGray" style="width:50px;height:50px;background:#ccc;"></div>
<div class="turnLeft" style="width:50px;height:25px;background:#eee;"></div>
<br><br>
<div id="start">Begin Sequence</div>

＆＃13;

Answer 2

调用＆＃34;完成＆＃34;中的每个后续动画。回调前一个：

$(".needGray").fadeTo("slow", 0.2, function() {
   $(".turnLeft").animate({scrollTop:0}, '500', function() {
       $(".needGray").fadeTo("slow",1.0);
   });
});

动画以异步方式运行。虽然当它们应用于同一个元素时，它们会被放入队列中。这意味着使用原始代码，第二个fadeTo将在第一个完成后才会运行，但animate会立即启动。这些功能都可以完成＆＃39;完成＆＃39;但是回调，在动画完成之前不会被调用。

Answer 3

使用＆＃34;完成＆＃34;功能：

$(".needGray").fadeTo("slow", 0.2, function (){
    $(".turnLeft").animate({scrollTop:0}, '500', "easein", function (){
        $(".needGray").fadeTo("slow",1.0);
    });
});

使用jQuery执行多个动画的最佳方法？

3 个答案: