Complete function before starting next (fadeIn/fadeOut)

Question

UPDATED (see notes at bottom)

I have created an image map and when you hover over a specific section of this image map a description will appear in a designated area (the sidebar) of my website.

Each description is of varying length therefore I have not set any maximum height level for my sidebar area so that the display can grow vertically to accomodate each description.

The problem I am having is that when you rapidly hover over areas of the image map the display produces some weird results; showing blocks up content from another hot spot for a split second in full beneath the newly hovered over area and corresponding description (hope that makes sense)

Is there anyway to complete one function in full before displaying the next to avoid this nasty display/animation?

Here is my code:

$(document).ready(function() {
    $("#a-hover").hide();
    $("#a").hover(function() {
        $("#a-hover").fadeIn();
    }).mouseleave(function() {
        $("#a-hover").fadeOut();
    });

    $("#b-hover").hide();
    $("#b").hover(function() {
        $("#b-hover").fadeIn();
    }).mouseleave(function() {
        $("#b-hover").fadeOut();
    }); 

    $("#c-hover").hide();
    $("#c").hover(function() {
        $("#c-hover").fadeIn();
    }).mouseleave(function() {
        $("#c-hover").fadeOut();
    });

And my CSS;

#a-hover,#b-hover,#c-hover {
    z-index: 2;
    float: left;
    position: relative;
}

#a-hover,#b-hover,#c-hover,{
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
    width:326px;
    min-height:603px;
    background-color:#dedddd;
}

I have shortened my code for readability (I have 9 image map hot spots)
I am a novice when it comes to jQuery but I am making a committment to learn so please go easy as my code may not be up to scratch!
I have tried to solve this myself before posting here, but I am out of my depth and need some expert advice

I appreciate any responses.

Thank You,

Wp.

UPDTAE: I tried the majority of what was provided here as answers and whilst I believe these answers are on the right track I couldn't get the problem to stop however I did notice improvement in the animations overall.

I ended up using a combination .stop(true,true); and **resize font automatically.

**Ultimately not getting the desired result is due to my lack of polish with jQuery but being in a rush I managed to find another way to handle this issue (auto resizable font).****

Thanks to all who took the time out to answer and for those reading this for a similar solution at least know the .stop(true,true); properties did in fact work for me to solve one part of this problem.

See [this](http://css-tricks.com/4911-full-jquery-animations/) article. It will probably help you. — Madara's Ghost, Sep 30 '11 at 14:50
Look here to see how I did it: http://jsfiddle.net/MarkKramer/dGMzw/1/ Also, you should have given us a jsfiddle to help you with your problem, what way other people could help you with the code — Mark Kramer, Oct 02 '11 at 19:27

score 2 · Answer 1 · answered Sep 30 '11 at 14:49

Try adding .stop before each fadeIn and fadeOut. You should pass true, true to stop to complete the animating instantly rather than leave it half faded in:

$("#a").hover(function() {
    $("#a-hover").stop(true, true).fadeIn();
}).mouseleave(function() {
    $("#a-hover").stop(true, true).fadeOut();
});

You can also get rid of all of the repetition by binding on a class instead of id's:

$(".imageMapElement").hover(function() {
    $("#" + $(this).attr("id") + "-hover").stop(true, true).fadeIn();
}).mouseleave(function() {
    $("#" + $(this).attr("id") + "-hover").stop(true, true).fadeOut();
});

score 1 · Answer 2 · answered Sep 30 '11 at 14:53

1

May be you can try Jquery Hover Intent plugin.

answered Sep 30 '11 at 14:53

Sivakumar

890
1
14
27

Good recommendation, hadn't considered that. – Richard Dalton Sep 30 '11 at 15:02

Blazemonger · Answer 3 · 2011-09-30T14:55:25.427

Try adding .stop() before each .fadeIn and .fadeOut -- that will cancel any previous animations and immediately begin your new one.

You also have a problem with using .hover() -- that actually encapsulates two actions, mouseover and mouseout. When you assign two functions to it, the first is mouseover and the second is mouseout, but when you assign only one function to it, that one function is used for both mouseover and mouseout. So, in effect, your code is causing the element to fadeIn and fadeOut on mouseout.

Incidentally, you can shorten your code a lot using standard jQuery techniques:

$("#a-hover,#b-hover,#c-hover").hide().hover(function() {
    $(this).stop().fadeIn();
}, function() {
    $(this).stop().fadeOut();
});

...or even better yet, assign a class to each of those three IDs and select it instead.

score 0 · Answer 4 · answered Sep 30 '11 at 14:48

0

try stopping the other functions:

 $("#a").hover(function() {
    $("#b-hover").stop().hide();
    $("#c-hover").stop().hide();
    $("#a-hover").fadeIn();

}).mouseleave(function() {
    $("#a-hover").fadeOut();

});

answered Sep 30 '11 at 14:48

Johnny Craig

4,974
2
26
27

score -1 · Answer 5 · answered Sep 30 '11 at 14:43

-1

You have to chain all the jQuery function calls!

answered Sep 30 '11 at 14:43

powtac

40,542
28
115
170

What does that have to do with anything? he needs to use `.stop()` or `.dequeue()`. – Madara's Ghost Sep 30 '11 at 14:49

Complete function before starting next (fadeIn/fadeOut)

5 Answers5