回调系列动画，为什么最后一个会跳？

Question

我正在尝试制作一个简单的动画淡入效果。 3 组文本一个接一个，我对目前的速度很满意。

但是在最后的动画中我有一个按钮进来了，当它进来时看起来很刺耳。我试过调整时间但它看起来仍然没有好多少。

var $one = $('.one');
var $two = $('.two');
var $three = $('.three');

var $button = $('.intro-text .btn');

$one.hide();
$two.hide();
$three.hide();
$button.hide();

setTimeout(function() {
    $one.fadeIn(1000, function() {
        $two.fadeIn(1100, function() {
            $three.fadeIn(1000, function() {
                $button.fadeIn(3000);
            });
        });
    });
}, 1000);

FIDDLE

是什么导致了剧烈的跳跃？

Answer 1

发生这种情况是因为您为按钮的任何状态设置了 0.2 秒的过渡。为了摆脱这种不良影响，不要将其设置为正常状态，即删除 a,:

a:hover,
a:focus,
a:active,
a.active {
  outline: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

回调系列动画，为什么最后一个会跳？

callback series of animations, why does the last one jump?

jquery

animation

fadein