Share Posted October 28, 2017 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 More sharing options...
Share Posted October 28, 2017 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 1 Link to comment Share on other sites More sharing options...
Share Posted October 28, 2017 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 28, 2017 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 More sharing options...
Share Posted October 28, 2017 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 28, 2017 Thanks @PointC, I'm looking into this. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now