CODEWITHSUNDEEP
javascriptjqueryjquery-uianimation
AnchovyLegend
AnchovyLegend

Reputation: 12538

Hide on mouseout conflicts with show

I found this really cool hover animation. It is on the following website: http://preview.nestolab.com/?theme=Kadalas

Click on any option to load the demo site, then scroll down to the 'Kadalas Portfolio' section...

I was trying to replicate it as follows, however it does not seem nearly as smooth, especially if an animation is in progress and you mouseout then mouseback in, it seems all the timed events get scrambled. What I am trying to do is essentially abort all timed events from running when I mouseout an object or when I mouseover multiple objects very quickly ( I would like to prevent multiple animations from executing simultaneously). What is happening now is if I hover an object 3 times in 500 milliseconds, it triggers the animation three times in a row. I would like for it to only trigger once.

$('.z_project_container').hover(function(){
    $(this).children('.z_project_title').fadeIn(200).animate({
        bottom: "250px"
    }, 650);
});
$('.z_project_container').mouseout(function(){
    $(this).children('.z_project_title').animate({
        bottom: "0px"
    }, 100);
    $(this).children('.z_project_title').fadeOut(150);
});

JSFiddle: http://jsfiddle.net/x3xay12L/3/

I appreciate any advice on how to make this animation more smooth.

Thanks in advance!

Upvotes: 0

Views: 44

Answers (2)

charlietfl
charlietfl

Reputation: 171669

The simplest fix is to use stop(true,true). This will stop the current animation, and with the 2 arguments true, remove it from animation queue and jump the current animation to it's end.

$('.z_project_container').hover(function(){
    $(this).children('.z_project_title').stop(true,true).fadeIn(200).animate({
        bottom: "250px"
    }, 650);
});

DEMO

Upvotes: 1

Tomzan
Tomzan

Reputation: 2818

Changing the events

First of all, I would change the event from hover to mouseEnter and mouseout to mouseLeave

$('.image-protfolio').mouseenter(function () {
    $(this).find('.image-protfolio-shader').stop(true, false).fadeIn(200);
    $(this).find('.image-protfolio-text').stop(true, false).animate({'top': '42%', 'display': 'block'}, 200);
});

$('.image-protfolio').mouseleave(function () {
    $(this).find('.image-protfolio-shader').stop(true, false).fadeOut(200);
    $(this).find('.image-protfolio-text').stop(true, false).slideDown(300);
    $(this).find('.image-protfolio-text').stop(true, false).animate({'top': '100%', 'display': 'block'}, 200);
});

Using the 'stop' function

Another thing that I used to achieve the smoothness when animation is in progress is the stop function from jQuery, which when called like this: stop(true, false) make sure that animation queue is cleared (first argument), and that the element will stay in its position and won't finish the last animation.

You can read about this function here: jQuery 'stop' function

And of course a fiddle:

DEMO

Upvotes: 1

Related Questions