jQuery custom queue

Question

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");
})

Answer 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.