Question

我在jQuery中有一个模式背景动画，就像这样。

        banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');

        window.setInterval(function() {
            banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
            y--;
        }, 150);

实例http://codepen.io/anon/pen/emMxXa

但它更像是“紧张不安”。我怎样才能让这样的东西更顺畅，更慢地运行。

Answer 1

您想要使用并查看 CSS过渡和 CSS动画以获得真正的流畅度。

-webkit-animation: move 30s linear 0s infinite alternate;
-moz-animation: move 30s linear 0s infinite alternate;

@-webkit-keyframes move { 
  from { background-position: 0px 0px } to { background-position: 0px 400px }  
}

@-moz-keyframes move { 
  from { background-position: 0px 0px } to { background-position: 0px 400px }  
}

演示：http://codepen.io/anon/pen/EaEMvy

Answer 2

看看这个jsFiddle。

你会看到，通过将间隔值从150减少到30，它会更顺畅：

             window.setInterval(function() {
                banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
                y--;
                //x--;

                //if you need to scroll image horizontally -
                // uncomment x and comment y

            }, 30);

你可以降低它，但降低得越多，它也越快。

Answer 3

查看https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

(function($) {

        var x = 0;
        var y = 0;
        //cache a reference to the banner
        var banner = $("#banner");

        // set initial banner background position
        banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');

        // scroll up background position every 90 milliseconds
        function step() {
            banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
            y--;
            //x--;

            //if you need to scroll image horizontally -
            // uncomment x and comment y
                    window.requestAnimationFrame(step)
        }

    window.requestAnimationFrame(step);

})(jQuery);

jQuery背景位置动画运行更顺畅

3 个答案: