Question

I have a menu with some buttons (anchors).
I want that when a certain button is pressed- a div element will appear in a slide animation.
I also want that when the user hovers over the other button- the div element will hide itself in an animation.
The problem is- if I move the mouse quickly over the other elements- the hide animation repeats itself a number of times.
Here’s the code:
Javascript/jQuery:

$(document).ready(function() {

    $("#shiurButton").click(function(event) {
    //Shows the div element
        $(".shiurPicker").toggle('slide', {direction:'right'}, 1000);
    });

    $("#testButton").mouseover(function(event){
        if ($(".shiurPicker").is(":visible")){
            $(".shiurPicker").hide('slide', {direction:'right'}, 1000);
        }
    });

     $("#dictionaryButton").mouseover(function(event) {
        if ($(".shiurPicker").is(":visible")){
            $(".shiurPicker").hide('slide', {direction:'right'}, 1000);
        }
    });

     $("#helpButton").mouseover(function(event) {
       if ($(".shiurPicker").is(":visible")){
           $(".shiurPicker").hide('slide', {direction:'right'}, 1000);
       }
});

});

Any ideas?
Thanks

Answer 1

First things first, combine the animations that do the same thing. then add a stop() to the animations:

$("#shiurButton").click(function(event) {
    //Shows the div element
    $(".shiurPicker").stop(true, true).toggle('slide', {direction:'right'}, 1000);
});

$("#testButton, #dictionaryButton, #helpButton").mouseover(function(event){
    if ($(".shiurPicker").is(":visible")){
        $(".shiurPicker").stop(true, true).hide('slide', {direction:'right'}, 1000);
    }
});

---

UPDATE:

Use data():

$(document).ready(function() {

    $("#shiurButton").click(function(event) {
        $(".shiurPicker").stop(true, true).show('slide', {
            direction: 'right'
        }, 1000);
        $(".shiurPicker").data('hide', false);
    });

    $("#testButton, #dictionaryButton, #helpButton").mouseover(function(event) {
        var hide = $(".shiurPicker").data('hide');
        if(hide == false){
            $(".shiurPicker").stop(true, true).hide('slide', {
                direction: 'right'
            }, 1000);
            $(".shiurPicker").data('hide', true);
        }
    });
});

Fiddle: http://jsfiddle.net/maniator/UW9gf/