title: JQuery Animate Complete Callback called Multiple Times
body: <p>This is difficult to explain, so I've included a code example below, and a jsFiddle link to demonstrate the issue.</p>
  
  <p>Here goes...I have the following code, where I am creating one JS object that has methods to control some JQuery (1.6.4) based animation.  If I start both the parent and child animations, then in the parent complete callback I stop the child, the parent complete functions gets called multiple times.  However, if I pull those methods out of an object, then I do not have this issue.  Any idea why, and how to get around this while keeping everything contained within an object?</p>
  
  <p><a href="http://jsfiddle.net/um3dU/41/" rel="nofollow">http://jsfiddle.net/um3dU/41/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div id="child"&gt;
         &lt;div id="scrolling-text"&gt;  
             this is scrolling text to explain the issue I'm running into      
         &lt;/div&gt;    
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#parent         { position: absolute; left: 0px; top: 0px; width: 960px; height: 100px; background-color: blue; }
  #child          { position: absolute; left: 0px; top: 25px; width: 400px; height: 20px; background-color: red; }
  #scrolling-text { position: absolute; left: 0px; }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var animation = {   
      startChild : function() {
          $('#scrolling-text').animate({ 
               left: -400 
          }, 
          10000, 
          function() { alert('child complete function'); });       
      },
  
      stopChild : function() {
          $('#scrolling-text').stop();        
      },
  
      startParent : function() {
          $('#parent').animate({ 
               top: 240 
          }, 
          5000, 
          $('#parent').animate({ top: 240 }, 5000, 
             function() { alert('In parent complete function'); this.stopChild(); }.bind(this));      
  }      
      }
  };
  </code></pre>
  
  <p>Calling Object Methods</p>
  
  <pre><code>animation.startChild();
  animation.startParent();
  </code></pre>