Using .queue()

Using .queue()

Hello !

I'm using queue to do a non stop animation (a blink animation), but when I try to stop it, I'd like that the animation runs until the stack end and not stop immediatly.

My code :

  2. <html>
  3. <head>
  4.     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  5.     <style>
  6.         div {
  7.             position: absolute;
  8.             top: 0px;
  9.             left: 0px;
  10.             width: 200px;
  11.             height: 200px;
  12.             border: 2px black solid;
  13.             background-color: green;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <input type="button" value="Stop it!" />
  19.     
  20.     <div id="foo"><p>Hello</p></div>
  21.     
  22.     <script type="text/javascript">
  23.         var blink = function(next) {
  24.             $("div").animate({left: '+=500px'}, 2000);
  25.             $("div").animate({left: '-=500px'}, 2000, blink);
  26.             
  27.             if($.isFunction(next)) {
  28.                 next();
  29.             }
  30.         };

  32.         $("div").queue('blink', blink);
  33.         $("div").dequeue("blink");
  34.         
  35.         $("input").click(function() {
  36.             $("div").stop();
  37.         }); 
  38.     </script>
  39. </body>
  40. </html>

My question is : how to stop the animation when the div is on his initial position ?

Thanks