横向动画和 setInterval()答案

【问题标题】：lateral animation and setInterval()横向动画和 setInterval()
【发布时间】：2013-12-17 16:49:48
【问题描述】：

我需要使用 Javascript 启动、停止和重新启动横向动画，通过一些搜索我发现 Jquery animate() 需要一个插件来执行启动-停止-重新启动，但我不会使用插件来执行此操作（没有时间问“为什么不呢？”）。

所以，我问我：“为什么你不使用setInterval() 来做这个横向动画并用clearInterval() 停止它？

这是我的代码，是正确的还是浏览器的疯狂工作？我需要构建一个“有效”（就浏览器工作而言）脚本，但是，我不是最好的。请原谅。

window.newsflash.interval = setInterval(function() {
    if(liWidthTot + $('.fn_container ul').css("left") <= 0)
        $('.fn_container ul').css('left', containerWidth);
    $('.fn_container ul').css("left", "-=1px");
},10);

//handler
$("#xml").on({
    mouseenter: function(){
        clearInterval(window.newsflash.interval);
    },
    mouseleave: function(){
        window.newsflash.interval = setInterval(function() {
            if($('.fn_container ul').css("left") - liWidthTot <= 0)
                $('.fn_container ul').css('left', containerWidth);
            $('.fn_container ul').css("left", "-=1px");
        },10);
    }
});

这只是我的 Js 代码的一种安宁...我不需要知道如何...但是如果使用 setInterval() 是个坏主意。

----- 编辑----

现在：

var newsList = document.getElementById("newsList");
window.newsflash.interval = setInterval(function() {
    if(liWidthTot + parseInt(newsList.style.left) <= 0) newsList.style.left = containerWidth +"px";
    ewsList.style.left = (parseInt(newsList.style.left) -1) + "px";
},10);

//handler
$("#xml").on({
    mouseenter: function(){
        clearInterval(window.newsflash.interval);

    },
    mouseleave: function(){
        window.newsflash.interval = setInterval(function() {
            if(liWidthTot + parseInt(newsList.style.left) <= 0) newsList.style.left = containerWidth +"px";
            newsList.style.left = (parseInt(newsList.style.left) -1) + "px";
        },10);
    }
})

谢谢队友。

【问题讨论】：

查看这个性能测试（比较 js 原生 setInterval 和 jQuery animate）：jsperf.com/jquery-vs-javascript-animation
谢谢...是我想知道的。

标签： javascript performance animation setinterval

【解决方案1】：

setInterval 是一种完全合法的动画制作方式。但是使用 jQuery 的animate 方法来启动、停止和重新启动动画也很容易。在我看来，两种解决方案的性能大致相同，但由您决定哪种语法看起来更简单。

Demo using jQuery's $.animate()

Demo using setInterval()

就性能而言，您要做的主要事情是确保保存对 jQuery 对象的引用，而不是重新获取它们。您会注意到，在我的示例中，我保存了对 ul 的引用，如下所示：

var $ul = $('.fn_container ul');

...这样就不必一遍又一遍地获取它。

另外：您可以考虑查看 CSS3 动画以获得更流畅的外观。您甚至可以使用 jQuery Transit 之类的东西，这样您就可以坚持使用 jQuery 动画语法。

【讨论】：