Note that there are some explanatory texts on larger screens.

plurals
  1. POlateral animation and setInterval()
    primarykey
    data
    text
    <p>I need to start, stop and restart a lateral animation with Javascript, with some search i found that Jquery <code>animate()</code> needs a plugin to do start-stop-restart, but i won't to use a plugin for do this (not waist your time to ask "why not?").</p> <p>So, I asked me: "why you not use <code>setInterval()</code> to do this lateral animation and stop it with <code>clearInterval()</code>?</p> <p>This is my code, is correct or is a crazy work for browser? I need to build a "efficent" (in terms of browser works) script but, I'm not the best about this. Have mercy plz.</p> <pre><code>window.newsflash.interval = setInterval(function() { if(liWidthTot + $('.fn_container ul').css("left") &lt;= 0) $('.fn_container ul').css('left', containerWidth); $('.fn_container ul').css("left", "-=1px"); },10); //handler $("#xml").on({ mouseenter: function(){ clearInterval(window.newsflash.interval); }, mouseleave: function(){ window.newsflash.interval = setInterval(function() { if($('.fn_container ul').css("left") - liWidthTot &lt;= 0) $('.fn_container ul').css('left', containerWidth); $('.fn_container ul').css("left", "-=1px"); },10); } }); </code></pre> <p>its only a peace of my Js code... I not need to know how to... but if use setInterval() is a bad idea.</p> <p>----- edit ----</p> <p>Now:</p> <pre><code>var newsList = document.getElementById("newsList"); window.newsflash.interval = setInterval(function() { if(liWidthTot + parseInt(newsList.style.left) &lt;= 0) newsList.style.left = containerWidth +"px"; ewsList.style.left = (parseInt(newsList.style.left) -1) + "px"; },10); //handler $("#xml").on({ mouseenter: function(){ clearInterval(window.newsflash.interval); }, mouseleave: function(){ window.newsflash.interval = setInterval(function() { if(liWidthTot + parseInt(newsList.style.left) &lt;= 0) newsList.style.left = containerWidth +"px"; newsList.style.left = (parseInt(newsList.style.left) -1) + "px"; },10); } }) </code></pre> <p>Thx mates.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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