Question

我有一个幻灯片，为每个图像制作10个切片并为切片设置动画。即，opera，chrome运行动画很好，但在Firefox中，动画太慢了，我尝试使用不同的计算机，但仍然相同。我使用＆＃34; for＆＃34;创建切片。循环创建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;

}

编辑：我已经改变了＆＃34; marginTop＆＃34;到＆＃34;顶部＆＃34;在动画中，每个切片的位置都是绝对的，现在问题解决了，它不再滞后了。我可能有一些关于使用jquery代码定位div的错误或者在同一时间更改大量边距可能是一些滞后的原因，但正如我所说它只发生在firefox而不是歌剧或者Chrome中。不知道是什么导致了这个滞后问题但是当我解决这个问题时，我会在这里写下我的解决方案。现在我将更改marginTop的最高值。谢谢大家的回答。

Answer 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。

如果您要说的话，我可以更具体地回答 - 发布实际动画的链接。由于我没有看到它在行动，我只是猜到我在看什么，我可能完全错了。

Answer 2

如果你没有像其他一些用户之前发现的那样谨慎，那么.animate方法有点处理器耗电量。

JQuery - lags during animation

jquery animate running laggy

请查看这些内容是否有助于您以最佳方式构建函数内的句子。

在Firefox上的Jquery动画速度

2 个答案: