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

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.2s的转换。为了消除这种不必要的影响，不要将其设置在正常状态，即删除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;
}