火狐上的jquery动画速度

Question

我有一张幻灯片，为每张图片制作10张切片，并为切片制作动画。即，歌剧，铬运行动画，但在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”到“顶”，在动画和对于每个切片来说，绝对的位置，现在解决的问题，它不再滞后。我可能有一些关于使用jquery代码定位div的错误，或者改变很多margin可能是一些滞后的原因，但正如我所说，它只发生在firefox中，即opera或chrome。不知道是什么造成了滞后问题，但是当我解决这个问题时，我会在这里写下我的解决方案。现在我将改变marginTop的最高价值。感谢大家的答案。

Answer 1

。如果您不像其他用户以前发现的那样谨慎，那么动态方法就会让处理器耗电。

JQuery - lags during animation

jquery animate running laggy

所以检查一下那些帮助你建立你的函数里面的句子以最佳的方式。

Answer 2

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

纠正我，如果我错了，但它看起来像你基本上推动最新的顶部，并在1秒的时间跨度的视图中移动它。如果在任何时候都是这种情况，那么您一次只能看到两帧，对吗？

我会创建一个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。

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