Databases
StackOverflow2013
Postsdbo
POJquery animation speed on firefox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery animation speed on firefox
    text
    copied!<p>i have a slideshow that makes 10 slices for each image and animate that slices. Ie,opera,chrome runs animations well but in firefox, animation is too slow, i tried with different computers and still same. I create slices with a "for" loop that creates 10 new divs and each div has different background position property. How can i solvee this for firefox? thanks.</p> <p>i've added some codes</p> <pre><code>//part of creating slices for(imageN=0;imageN&lt;imageCount;imageN++) { $('#image').append("&lt;div name=slices class=slices&gt;&lt;/div&gt;"); 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&lt;10;i++) { $('.slices:eq('+imageN+')').append("&lt;div name=slice"+i+" class=slice&gt;&lt;/div&gt;"); $(".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); } </code></pre> <p>And the function that called when you click animate button</p> <pre><code>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&gt;1) return; //this part is calculating id of next image if(siz &gt; 1 &amp;&amp; current!= last) { txen = current + 1; } else if(siz == 1) { txen = current; } else if(siz &gt; 1 &amp;&amp; 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&lt;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; } </code></pre> <p>Edit: I've changed "marginTop" to "top" in animation and position to absolute for each slice, problem solved for now, it is not lagging anymore. I might have had some errors about positioning divs with jquery codes or changing a lot of margins at the same may be reason for some lag but as i said it was happening only in firefox not ie,opera or chrome. Don't know what caused that lag issue but when i solve this i will write my solution here. For now i will change top value insted of marginTop. Thanks everyone for answers.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload