CODEWITHSUNDEEP
jqueryjquery-animate
KF2
KF2

Reputation: 10143

JQuery Stop() function don't stop animation

I have 2 sentences and highlight each word with an animation.

if i press "First Line" button animation will play for first line and if press "Sec Line" button first line animation will stop and sec line animation will play.

JQuery Code

var time = 15; 

$("#go").click(function(){
  $("abbr", "#2" ).stop(true,true); 
    $("abbr", "#1").each(function(i,e) {
           $(e).delay(i * ((time * 1000) / $("abbr",  "#1").length))
               .animate({'color': 'red'}, 1, function () {
               $(e).animate({ 'color': 'black' }, 5000);
               });
    });
});

$("#back").click(function(){
    $("abbr", "#1" ).stop(true,true);
    $("abbr", "#2").each(function(i,e) {
           $(e).delay(i * ((time * 1000) / $("abbr",  "#2").length))
               .animate({'color': 'red'}, 1, function () {
               $(e).animate({ 'color': 'black' }, 5000);
               });
    }); });

Html Code

<span id="1">
    <abbr>fractal </abbr>
    <abbr>is a mathematical </abbr>
    <abbr>that has </abbr> 
    <abbr>a fractal dimension </abbr> 
    <abbr>that usually</abbr> 
    <abbr>exceeds its </abbr> 
    <abbr>topological dimension</abbr> 
    <abbr>fractal </abbr>
    <abbr>is a mathematical </abbr>
    <abbr>that has </abbr> 
    <abbr>a fractal dimension </abbr> 
    <abbr>that usually</abbr> 
    <abbr>exceeds its </abbr> 
    <abbr>topological dimension</abbr>  
</span>
<br>
 <br> 
 <span id="2">
    <abbr>and may </abbr>
    <abbr>fall between </abbr>
    <abbr>the integers </abbr> 
    <abbr>Fractals </abbr> 
    <abbr>are typically </abbr> 
    <abbr>self-similar </abbr> 
    <abbr>patterns</abbr> 
    <abbr>and may </abbr>
    <abbr>fall between </abbr>
    <abbr>the integers </abbr> 
    <abbr>Fractals </abbr> 
    <abbr>are typically </abbr> 
    <abbr>self-similar </abbr> 
    <abbr>patterns</abbr>  
</span> 
<br>
 <br> 
<button id="go">First Line</button> 
<button id="back">Sec Line</button>

every thing is fine,but when i play first line animation and after some sec for example(3 sec) press "sec line" button animation and again after(for example 3 sec) press first line animation animation will start from begin and from middle of sentence.

Result: jsfiddle

enter image description here

i think stop() function have some problem. please help.

Upvotes: 0

Views: 403

Answers (2)

KF2
KF2

Reputation: 10143

i got the solution

instead of using

 $("abbr", "#2" ).stop(true,true); 
 $("abbr", "#1" ).stop(true,true);

i use

  $("abbr").stop(false,true);

result: http://jsfiddle.net/d5VTg/3/

Upvotes: 1

Johan
Johan

Reputation: 35194

I dont think that you can clear your delay-queue. Try using a timer inside the loop instead:

// check if the timer is running, in that case, clear it: clearTimeout(timer);

var timer = setTimeout(function(){

    //do animation stuff

}, (i * ((time * 1000) / $("abbr",  "#1").length)));

Upvotes: 0

Related Questions