3

What I'm trying to do is segregate animations so I can kill certain ones without effecting the important ones. I am trying to add the mouseenter/mouseleave animations to a queue so I can kill them when a different animation starts. The code below does nothing to stop the queued animations. It behaves like the default where the animations will build up in the queue and play out. What gives?

$('.item').mouseenter(function(){
    $(this).clearQueue("test");
    $(this).queue("test",function(next){        
        $(this).animate({
            height: '250px'
        },500);
    });
    $(this).dequeue("test");
}).mouseleave(function(){
    $(this).clearQueue("test");
    $(this).queue("test",function(next){        
        $(this).animate({
            height: '140px'
        }, 250);
    });
    $(this).dequeue("test");
})
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
methodin
  • 6,717
  • 1
  • 25
  • 27
  • Some general queue uses, explaining how custom queues operate, etc: [Can somebody explain jQuery queue to me?](http://stackoverflow.com/q/1058158/91914) – gnarf Nov 20 '10 at 02:31
  • Actually saw that before posting. All the examples have custom functions and not animations! Oh well. Thanks, though. – methodin Nov 20 '10 at 03:59

1 Answers1

1

It's because the functions you're running in the "test" queue complete immediately, so the result is that you're instantly adding things onto the fx (default animation) queue, your "test" queue remains empty the entire time.

It's only has an item in it just before calling .dequeue()...then the fx queue has a new entry, that queue keeps building and that queue you're never clearing. It goes like this:

  • $(this).clearQueue("test"); - this queue was already empty
  • $(this).queue("test", ...); - add item to the test queue
  • $(this).animate({... }); - queue up animation on the fx queue
  • $(this).dequeue("test"); - start the test queue, which is immediately emptied since .animate() returns instantly.
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155