FirefoxでのJqueryのアニメーションの速度

Question

私は、各画像に対して10個のスライスを作成し、そのスライスをアニメーション化するスライドショーを持っています。つまり、オペラ、クロムはアニメーションはうまくいきますが、Firefoxではアニメーションが遅すぎます。私は別のコンピュータで試してみましたが、それでも同じです。私は10個の新しいdivを作成する "for"ループでスライスを作成し、各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を配置することについていくつかのエラーを抱えていたか、同じマージンを多く変更すると遅れが生じるかもしれませんが、私はfirefoxでしか起こっていないと言いました。その遅れの原因を知っていないが、私はこれを解決するとき私はここで私の解決策を記述します。今のところ私はmarginTopの最高値instedを変更します。誰もお返事ありがとうございます。

Answer 1

.animateメソッドは、他のユーザーが以前に見つけたように、慎重ではない場合は、プロセッサーを大量に消費します。

JQuery - lags during animation

jquery animate running laggy

たものが最適な方法であなたの関数内の文章を構築する上であなたを助けるのであればチェックしてください。

Answer 2

あなたのコードを見直した後、アニメーションの遅れの主な理由は、あなたのスライスが個々の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全体をトラバースする必要はありません。

実際のアニメーションへのリンクを投稿すると、より具体的に答えることができます。私はそれが現実には見えないので、私が見ていたことをちょうど推測しました。私はそれが完全に間違っているかもしれません。