Jquery if not mouseover statement

Question

I am trying to work with some jQuery and HTML.

I have two div element containers containing various content. The two elements are adjacent to one another. The divs do not contain one another. I have the code written so that when I mouseover one div (div#1), the other div (div#2) slides down (.slideDown).

Also, when you mouseout div#2, div#2 slides up (.slideUp).

The problem is that if div#2 is already slid down, and if you mouseover div#1 again, div#2 will slide up and back down again. This is pretty annoying and unprofessional. I need it to slide up only if my mouse is not over div#1.

This is my goal: I need to find a jQuery statement that says, "Only if the mouse is "out" of div#2 and not "over" div#1, slide div#2 up."

Is this possible?

I appreciate any help.

Thanks.

Answer 1

You need to use .stop() to stop the animation before re-animating the element. This will prevent the queue from filling up with repetitive animations:

$('#stop').hover(function() {
    $(this).stop().animate({width: '250px'});
}, function() {
    $(this).stop().animate({width: '150px'});
});

Demo: http://jsfiddle.net/Blender/2TkNc/2/