How to prevent hover animations from eventual disappearance

Question

I have code for an image hover that will display information on top of an image when hovered over. By using the queue:false in the callback, I have stopped the animations from firing over and over when the user hovers over them multiple times.

My issue is, if one got a bit crazy with the mouseOverING, the fading in/out of the hover state will diminish the information's opacity until the hover image is no longer visible.

$('.image').hover(function() {
    $('.linkWords', this).animate({
        opacity: "show"
    }, {
        queue: false
    });
}, function() {
    $('.linkWords', this).animate({
        opacity: "hide"
    }, {
        queue: false
    });
});

Here is my jsfiddle, if you feel like playing around.

http://jsfiddle.net/bkbarton/qrprD/

Thanks

score 0 · Accepted Answer · answered Sep 08 '11 at 17:28

0

Try a .stop(true) on the element before starting the next animation. This will stop the eventually current animation in progress.

answered Sep 08 '11 at 17:28

Wulf

3,878
2
22
36

Wulf - Do you suggest I place the .stop(true) at the first .animate or the second within the .hover() function? I tried both and they didn't solve my issues. The hover image still diminishes to invisible if the user continuously and quickly moves between the two hover areas. – bkbarton Sep 08 '11 at 17:40
After doing a bit more research, I found that you are correct. Except that adding an additional true makes the effect work properly. .stop(true, true)... – bkbarton Sep 08 '11 at 18:38
Thats right, the first true stops current running animations, the second true brings them to the final state. For my animations its mostly better to just stop them, but there won't be a second parameter if it would has no use ;) Please accept my answer if it helped you. – Wulf Sep 08 '11 at 18:57

score 0 · Answer 2 · answered Sep 08 '11 at 18:18

Send the opacity to 1, not "show". "Show" can use the current max opacity as the opacity to fade to, so if it was fading out and the current opacity was .5, it would show it by fading in to .5.

$('.image').hover(function() {
    $('.linkWords', this).animate({
        opacity: 1
    }, {
        queue: false
    });
}, function() {
    $('.linkWords', this).animate({
        opacity: "hide"
    }, {
        queue: false
    });
});

How to prevent hover animations from eventual disappearance

2 Answers2