Question

我有以下代码： -

HTML

<div id="wrapper">
  <span id="pb-stars"></span>
</div>

CSS

#wrapper {
  height: 1000px;
  width: 100%;
  background: #000000;
}

#pb-stars {
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/pb-stars.png);
    background-position: center;
    background-size: 40%;
    width: 100%;
    height: 1075px;
    position: absolute;
    display: block;
    top: 0;
    z-index: 0;
}

的jQuery

jQuery('#pb-stars').animate({
    'background-size': '110%'
}, 28000);

我遇到的问题是动画有点“生涩”，有没有办法让这个动画运行得更顺畅？

Answer 1

将缓动设置为'线性'，如下所示：

JSFIDDLE

jQuery('#pb-stars').animate({
    'background-size': '110%'
}, 28000, 'linear');

Answer 2

要拥有更流畅的动画，您必须减少执行时间，因为jquery会执行线性动画并填充所需的所有时间。我把它推到了 5000 ，它运行正常。 ;）

如何获得更流畅的背景大小动画？

2 个答案: