Firefox上的Jquery动画速度答案

【问题标题】：Jquery animation speed on firefoxFirefox上的Jquery动画速度
【发布时间】：2011-12-02 20:36:20
【问题描述】：

我有一个幻灯片，它为每个图像制作 10 个切片并为这些切片设置动画。即，opera，chrome 运行动画很好，但在 Firefox 中，动画太慢，我尝试了不同的计算机，但仍然相同。我使用“for”循环创建切片，该循环创建 10 个新 div，每个 div 具有不同的背景位置属性。我怎样才能为 Firefox 解决这个问题？谢谢。

我添加了一些代码

//part of creating slices

for(imageN=0;imageN<imageCount;imageN++)
{
$('#image').append("<div name=slices class=slices></div>");
slicesCreate(imageN);
}

//#image is main div contains slice divs.

//Here is sliceCreate function
/*In this function, it takes how many images added to slideshow, takes all 
sources for each image and creates slices*/
function slicesCreate(imageN)
{
var i = 0;
var nleft = 0;
var image= $("#image img:eq("+imageN+")").attr("src");

    for(i=0;i<10;i++)

       {

     $('.slices:eq('+imageN+')').append("<div name=slice"+i+" class=slice></div>");
 $(".slices:eq("+imageN+") .slice[name=slice"+i+"]").css({
  backgroundImage: "url("+image+")",
  backgroundPosition:  nleft + "px 0px",
  backgroundRepeat: "no-repeat",
  backgroundSize: twidth
     });  

    /*sliceCount is a global variable that calculated when page loaded for display
    resolution*/
    nleft -=sliceCount;

         }

   }


/* And here is one of the animation code, this code runs for every slice */
function animateSlices(current,next,slice,animid,delay)
{

 setTimeout(function() {

$(".slices:eq("+next+") .slice[name=slice"+slice+"]").css({
       display: "block",
           marginTop: "-700px"
});  


$(".slices:eq("+next+") .slice[name=slice"+slice+"]").animate({
marginTop: "0px"

},1000);


   $(".slices:eq("+current+") .slice[name=slice"+slice+"]").animate({
marginTop: "700px"      
},1000);



    }, delay);


}

以及点击动画按钮时调用的函数

function anim()
 {
  if(!animating)
    {
      animating = true;

       var j = 0;
       var delay = 0;
       current = $('.slices:visible').index('.slices');
       var siz = $('.slices').size();
       var cSize = $('.slices:visible').size();
       var txen = 2;
       var rand = parseInt(Math.random()*3);
       var last = $('.slices:last').index('.slices');
       if(cSize>1)
       return;

    //this part is calculating id of next image
     if(siz > 1 && current!= last)
      {
        txen = current + 1;
      }
     else if(siz == 1)
      {
        txen = current;
      }
       else if(siz > 1 && current== last)
      {
       txen = 0;
      }

   //this part is makin next image slices visible and changes z-index for animation
$(".slices:eq("+txen+")").css({
        display: "block",
        zIndex: "92"
}); 

$(".slices:eq("+current+")").css({
         zIndex: "91"
});         

//this part calls animateSlices function for every next image slices 
   for(j=0;j<10;j++)
     {

   $(".slices:eq("+txen+") .slice[name=slice"+j+"]").css({
        marginTop: "0px"
    }); 

         animateSlices(current,txen,j,rand,delay);
    /*current = this image, txen = next image, j = slice number, rand = animation id,  
    delay = delay for animation */
if(rand==0)
delay += 150;
else
delay += 50;

}

}
else
return;

}

编辑：我已将动画中的“marginTop”更改为“top”，并将每个切片的位置更改为绝对，现在问题已解决，不再滞后。我可能在使用 jquery 代码定位 div 或同时更改大量边距时遇到了一些错误，这可能是一些滞后的原因，但正如我所说，它只发生在 firefox 中，而不是 ie、opera 或 chrome。不知道是什么导致了这个滞后问题，但是当我解决这个问题时，我会在这里写下我的解决方案。现在我将更改marginTop 的最高值。谢谢大家的解答。

【问题讨论】：

你为什么不用api.jquery.com/animate？
您的动画代码看起来如何？一个例子真的有助于理解这个问题。
您将在每个浏览器中体验不同的动画速度。看看你在 IE 7 中的动画，然后看看你认为 FF 有多慢。无论如何，你需要粘贴你的动画代码，因为你的描述你的方法对我来说听起来很奇怪，我做了很多 jquery 动画。
我已经添加了部分代码，这可能有助于理解。它为每个图像创建 1 个切片 div 和 10 个切片 div，然后为每个切片设置动画。
我想看看处理动画的代码。这看起来就像创建元素的代码。根据您的处理方式，速度可能会有很大差异。

标签： jquery performance firefox animation

【解决方案1】：

在查看您的代码后，我会说动画滞后的主要原因是您的切片被添加为单独的 dom 元素，并且动画不仅要推动这些元素，而且还要操作非特定选择器...

如果我错了，请纠正我，但看起来您基本上是将最新的推到顶部并在 1 秒的时间内将其移动到视图中。如果在任何时候都是这种情况，您一次只能看到 2 帧，对吧？

我会创建一个 javascript 对象并使用它来填充 2 个特定的 dom 元素以进行操作。

<div id="current"></div>
<div id="next"></div>

然后通过动画回调和你的js对象的适用索引来操作这些元素的css。此示例可能无法反映您的需求，但原则是相同的：

var slices = {
    current: 0,
    image_arr: new Array(),
    animating: false,
    queue: null,
    delay: 150,
    init: function(){
         // obviously declare these variables and access them relevantly
         for(imageN=0;imageN<imageCount;imageN++)
         {
            this.image_arr.push($("#image img:eq("+imageN+")").attr("src"));
         }
    },
    animate: function(){
        if(!animating)
        {
            this.animating = true;
            // cycle through your image_arr instead of crawling the dom each iteration
            // set jquery animations as expected then re-call function if needed

            $('#current').css('background-image', this.image_arr[current]).delay(50).animate({marginTop: '700px'}, 1000, function(){
                 this.current += 1; // assuming you're using an int to call the index value of image_arr
            });

            $('#next').css({backgroundImage: this.image_arr[current], marginTop: '-700px').delay(50).animate({marginTop: '0px'}, 1000);

            this.queue = setTimeout(function(){
                this.animate();
            }, this.delay);
            //this should obviously be more considerate, but the idea is to recursively call animate until you're through animating
        }
    }
};

$(document).ready(function(){
    slices.init();
});

这个例子根本不是稳定的或经过测试的，如果你复制/粘贴显然不会工作，但一般的想法是将你的切片元素推入一个数组或对象中。您当然也可以将每个切片的对象推送到数组中。任何适合您的需求。

但是这样你就不必在每一帧上遍历整个 dom。

如果您要说，我可以更具体地回答 - 发布指向您的实际动画的链接。因为我没有看到它在起作用，所以我只是猜测我在看什么，我可能完全弄错了。

【讨论】：

明白你的意思，谢谢你的回复，我会试试那种代码，让你知道结果。
我得到了一个解决方案，将动画中的“marginTop”替换为“top”，并为每个切片设置“绝对”位置。这似乎是一个临时解决方案，但对我有用。我稍后会尝试你的代码。再次感谢。

【解决方案2】：

.animate 方法有点消耗处理器功率，如果您不小心的话，就像其他一些用户之前发现的那样。

JQuery - lags during animation

jquery animate running laggy

因此，请检查这些是否有助于您以最佳方式在函数中构建句子。

【讨论】：