Jump to content
Search Community

setTimeout on hover before starting the animation

Léo Durand test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. :/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...