title: jquery queue to parent rather than specific children?
body: <p>I am making some animation on children of a div, the children are animating one at a time on hover, while the other are stopping, and sometimes being removed too. 
  What I wanted though is a callback for when all the animation has stopped/ ceased / or is no longer moving - in other words.</p>
  
  <p>...I tried to make something like this, to queue directly to the parent, but this doesn't seem to work at all:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" &gt;
              $(document).ready(function(){   
  
                  $('div.start').click(function(){
  
                      $('&lt;img style="display:block;display:none;" src="http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg"&gt;')
                      .appendTo($(this))
                      .animate({opacity:0},0)
                      .css('display','block')
                      .animate({opacity:1},2000,function(){});
  
                      $(this).queue(function(){
                          $('#gotcha').html(1+parseInt($('#gotcha').html()));
                      });
  
                  });         
              });
              &lt;/script&gt;
          &lt;style&gt;
              div.start{
                  background-color:#0057D8;
                  width:100px;
                  float:left;
              }
              div#gotcha{
                  float:left;
                  width:100px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div class="start"&gt;Start&lt;/div&gt;
          &lt;div id="gotcha"&gt;
              0
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The number was suppossed to change once animation is complete, but this never happens.
  Is there any other approach I could do? Or perhaps to get the remaining time of fx somehow, and go with a setTimeout?</p>
  
  <p>Any advice is appreciated.</p>
  
  <p><strong>EDIT</strong>: Why would I want to do this?</p>
  
  <p>In real I have a range of small thumbs images, and upon hovering them, they create their bigger counterparts in dom which on load attach themselves to a showcase div.
  the attached images stack with each other, to achieve a smooth transition effect, the latest image loaded is being animated, while also stopping the other siblings from animating.
  upon unhover I want to create a timeout once all the animations stopped to zoom back to the original picture.
  I tried to use .children('img:last').queue(function(){}) to queue the zoom back effect to the latest child, however because they are loaded asynchronously with load event their sequence is not clear, moreover once the animation is complete, and if we don't unhover quickly, it takes opacity 1 and removes the other siblings from parent as well. So it's really hard to guess what children shall we bind the queue to.</p>
  
  <p><strong>EDIT 2</strong>: Right now I modified my code a little bit, and I only attach the img to the div once its loaded, so the last loaded always available with img: last selector, but something tells me that this is not protected from bugs either.</p>
  
  <p>Right now I'm thinking best would be to do something like this:</p>
  
  <ol>
  <li>Get isAnimated for all children.</li>
  <li>If animated - get the duration and set timeout event.</li>
  <li>If no - execute the event directly.</li>
  </ol>
  
  <p>The problem though is that I have no idea how to get the remaining duration of the animations. It would greatly help if you give some advice on that. Thanks</p>