Question

我正在尝试使用简单的动画fadein。 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;
}

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

1 个答案: