jQuery fadeIn and fadeOut buggy on hover of image

Question

Hi All,

I have four images on a page that on hover, needs to replace the main text with relevant text pertaining to that image. It's working but buggy. If I roll over slowly and roll off slowly, I get the desired effect. When I rollover quickly both div's content show. Here is a thinned out version of what I need to be able to do.

<img src="btn-open.gif" class="btn" />
<div class="mainText">
<h1>Main text</h1>
<p>Morbi mollis auctor magna, eu sodales mi posuere elementum. Donec lacus lorem, vestibulum sed luctus ac, tincidunt sit amet eros. Nullam tristique lectus lobortis nibh pharetra placerat. Aliquam quis tellus mauris. Quisque eu convallis elit. Sed vitae libero est. Suspendisse laoreet magna magna, vitae malesuada diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eros ipsum, interdum et volutpat sed, commodo aliquam odio. Maecenas auctor condimentum mi. Maecenas ante eros, tristique nec viverra sed, molestie sit amet nulla. Suspendisse vitae turpis ac felis rutrum interdum.</p>
</div>
<div class="replacementText">
<h1>Replacement text</h1>
<p>Nulla ac magna nec quam cursus mollis eget a nulla! Vestibulum quis nibh ipsum, ut vehicula leo. Etiam ac felis suscipit mi semper vehicula. Praesent est mi, suscipit sit amet bibendum at, porta quis elit. Integer lectus est, consequat non sodales ac, pharetra sit amet tellus. Suspendisse porttitor massa a dolor suscipit sed ullamcorper ipsum vehicula. In malesuada augue sit amet ante volutpat euismod. Ut vel felis sed enim placerat ultricies. Aliquam erat volutpat. Vivamus rutrum; ante vitae euismod accumsan, felis odio lacinia magna, eu viverra nisl metus non ligula? In metus nisi, viverra vel scelerisque non, ullamcorper sed arcu? In hac habitasse platea dictumst. Donec laoreet dapibus quam vitae pulvinar. Morbi ut purus nisl. Nulla eu velit ipsum; vel mattis magna. Aenean sodales faucibus dapibus.</p> 
</div>


$(document).ready(function() {

$(".btn").hover(
function() {
    $(this).css({ cursor: "pointer" });
    $(".mainText").hide();
    $(".replacementText").slideDown("slow");
},
function() {
    $(".replacementText").hide();
    $(".mainText").slideDown("slow");

});

});

Answer 1

I suggest to insert a delay in the hide, something like:

var timeout;
$(document).ready(function() {
    $(".btn").hover(
        function() {
            clearTimeout(timeout)
            $(this).css({ cursor: "pointer" });
            $(".mainText").hide();
            $(".replacementText").slideDown("slow");
        },
        function() {
            timeout = setTimeout(function(){
            $(".replacementText").hide();
            $(".mainText").slideDown("slow");
            },250);
        });
});

Answer 2

When hiding the elements, you need to cancel (.stop()) the opposite slide animation that's occuring so they go away instantly when the hover changes, like this:

$(".btn").hover(function() {
    $(".mainText").stop(true, true).hide();
    $(".replacementText").slideDown("slow");
}, function() {
    $(".replacementText").stop(true, true).hide();
    $(".mainText").slideDown("slow");
}).css({ cursor: "pointer" });

Also I moved the .css() call...you only see the result of cursor: pointer on hover anyway, so no need to apply it every time, and honestly this should be moved all the way to the stylesheet for the exact same effect, like this:

.btn { cursor: pointer; }