[jQuery] Making a fading rollover
I am trying to make a rollover button using 'fade' and 'hide'.
I have 2 images absolutely positioned on a page, one exactly over the
other and the 'lower' image starts with 'display:none;'.
I want to fade out the 'top' image such that it appears that the lower
image is fading in.
I have used:
$(document).ready(function ()
{
$('#case').mouseover(function()
{
$('#case_over').fadeIn(250);
});
$('#case_over').mouseout(function()
{
$('#case_over').fadeOut(3000);
});
});
Where #case is the 'top' image and #case_over is the 'lower' image.
This works just fine, but I have to wait for the 3 second (3000)
fadeOut before I can initiate the fadeIn again.
Is there anyway that I can interupt the fadeIn and fadeOut such that
if the user does mouseover during the fadeOut it will immediately
start the fadeIn.
There might well be a more elegant solution to all this - I am new to
all this stuff!
Thanks in advance.