setTimeout on hover before starting the animation

[Léo Durand 3 Likes (Newbie)]

Hi ! 

I'm trying to add a setTimeout on hover to avoid a bug when the mouse is going fast on links.

I tried a simple setTimeout but nothing
 

setTimeout(function over(){
  TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"})
  TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"});
  TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut});
}, 200);

and also with this code but didn't find to make it work...

 

$(document).ready(function(){
    var delay=200, setTimeoutConst;
    $('.thumb').hover(function(){
        setTimeoutConst = setTimeout(function(){
            $(".thumb").hover(over, out);
            function over(){
                TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"})
                TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"});
                TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut});
            }
            function out(){
                TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut})
                TweenMax.to($(this).find(".view_thumb"), 0.2, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut})
                TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"0" , ease:Power2.easeOut});
            }
        }, delay);
    },function(){
        clearTimeout(setTimeoutConst );
    })
})

If you have any idea I would be really glad.

Thanks !

See the Pen eeYGrO by leodurand (@leodurand) on CodePen

[mikel 1,823 Likes (Superhero)]

Hi @Léo Durand ,

 

What do you think of this construct?
The necessary animations are only controlled via mouseenter:

 

See the Pen qrgVve by mikeK (@mikeK) on CodePen

 

Happy tweening ...

 

Mikel

[PointC 8,599 Likes (Superhero)]

Hi @Léo Durand

 

For something like that, I'd recommend giving each element its own timeline which can play/reverse on hover. That way nothing gets 'stuck' when you hover on/off too quickly. Something like this:

See the Pen qVBVEj by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

[Léo Durand 3 Likes (Newbie)]

Thanks a lot for the answers.

@PointC : It's clearly more fluid, but I like that the mouseOver is different that mouseOut but it's clear I'm gonna use it for some other project! Is there a way to keep both animation and make it individual like in your code ?

@mikel : Thanks Mikel, but this code is a bit to heavy for me, I don't understand it very much. :/

[PointC 8,599 Likes (Superhero)]

If you want a different animation for the reverse, I'd take a look at this recent post by @Carl. That one is dealing with a click, but you can make it work with hover as well.

 

Happy tweening.

[Léo Durand 3 Likes (Newbie)]

Thanks @PointC, I'm looking into this.