jQuery slide / hide inconsistency

Question

I have two radio buttons, to which I have assigned change handlers to show/hide certain divs based on the selection:

$("input[name='pick_up_point']").change(function()
{
    if($("input[name='pick_up_point']:checked").val() == "pick_up_airport")
    {
        $("#pick_up_airport_div").slideDown();
        $("#pick_up_attraction_div").hide();
    }
    else if($("input[name='pick_up_point']:checked").val() == "pick_up_attraction")
    {
        $("#pick_up_attraction_div").slideDown();
        $("#pick_up_airport_div").hide();
    }
});

This works fine, except for when I change the options in quick succession (mouse clicks or arrow keys), the div that is meant to hide is still displayed. If I change slideDown() to show() the issue does not occur.

This issue occurs in both Internet Explorer 8 and Firefox, is it a known bug (jQuery 1.4.2) or am I doing something wrong here?

Answer 1

Like mike said you would just add the .stop() function but you could still use your old code

$("#pick_up_airport_div").stop().slideDown();

What your describing is not a bug, it is the animation que building up. By pressing the input in quick succession it adds that animation to the que and fires it when its turn comes up. So using the stop function it stops the what ever animation is going on. So by doing that you can prevent the buildup. Hope that helps.

Answer 2

In this case you need .stop(true, true) (not just .stop()), so the sliding animations don't stop mid-way, like this:

$("input[name='pick_up_point']").change(function()
{
    if($("input[name='pick_up_point']:checked").val() == "pick_up_airport")
    {
        $("#pick_up_airport_div").stop(true, true).slideDown();
        $("#pick_up_attraction_div").stop(true, true).hide();
    }
    else if($("input[name='pick_up_point']:checked").val() == "pick_up_attraction")
    {
        $("#pick_up_attraction_div").stop(true, true).slideDown();
        $("#pick_up_airport_div").stop(true, true).hide();
    }
});

With just .stop(), it'll halt the animation, resulting in an element being partially slid down, and future slide-downs will only go to that height as well. The second argument of .stop(bool, bool) tells it whether to jump to the end, restoring the full height of the element, which is what you need in a .slideUp() or .slideDown() situation (among others!).