jquery div fade in/out - keeps animating after mouse out

Question

I am having two issues with some jquery I am doing on a menu.

I have two blocks:

-------------------
| block1 | block2 |
-------------------

Block 2 is initially hidden.

When the user mouses over block 1, block 2 fades in, and then fades out when the user mouses off block 1.

I have two issues:

1) If the user mouses over/out/over/out/etc quickly, block 2 keeps fading in/out/in/out/etc for a few seconds, even though the user's mouse is not on block 1.

2) If the user mouses over block 1 and then moves their mouse to block 2, block 2 fades out - I need block 2 to remain visible.

My jquery code is:

$('#block1').hover(
function(){$('#block2').fadeIn()},
function(){$('#block2').fadeOut()}
);

I already use jquery on the page for other effects, so I want to use jquery rather than css to do this block 2 fade in and out.

Thanks

Answer 1

1) If the user mouses over/out/over/out/etc quickly, block 2 keeps fading in/out/in/out/etc for a few seconds, even though the user's mouse is not on block 1.

You need to cancel the animation on mouseOut. You can use the stop method to do this. http://api.jquery.com/stop/

2) If the user mouses over block 1 and then moves their mouse to block 2, block 2 fades out - I need block 2 to remain visible.

Add a hover event to block 2 which adds a css class to make block 2 visible all the time. This should be removed on mouseout.

Answer 2

$('#block1').hover(
    function(){$('#block2').stop().fadeIn()},
    function(){$('#block2').stop().fadeOut()}
);