Hover popup effect with delay, too late

[acidking]

Hi,

I am trying to create a popup over a button with a delay, the problem is if I hover out of the button before the delay is over, then the tween would still go on. I know I can kill the tween in Timeline, but I am not using timeline here because I am using a (this) call. Any suggestion would be appreciated.

 

    $('.button').on('mouseenter', function () {
        TweenLite.to($(this).children('.popup'), 0.2, { delay: 1, opacity: '1' });
    });
    $('.button').on('mouseleave', function () {
        TweenLite.to($(this).children('.popup'), 0, { opacity: '0' });
    });

 

[Rodrigo]

Hi

 

Why don't you try play() and reverse() on mouse over/out events.

 

Create the tween inside a variable and then call the methods on each event.

 

var t = TweenLite.to(element, time, {vars, paused:true}),

triggerEl = $("#triggerEl");

 

triggerEl.mouseover(function(){

t.play();

});

 

triggerEl.mouseout(function(){

t.reverse();

});

 

That shouldn't fire the animation if the mouse leaves the element before the delay time has elapsed.

 

Rodrigo.

[jamiejefferson]

Perhaps try changing the overwrite e.g.

TweenLite.set($(this).children('.popup'), { opacity: 0, overwrite: "all" });

[GreenSock]

All good ideas mentioned, and just so you know, you can kill all the tweens of a particular object anytime like:

TweenLite.killTweensOf(yourElement);

And if you want to get more precise, you can kill only the opacity tweens using the extra parameter, like:

TweenLite.killTweensOf(yourElement, false, {opacity:true});

[acidking]

 

Perhaps try changing the overwrite e.g.

TweenLite.set($(this).children('.popup'), { opacity: 0, overwrite: "all" });

 

Awesome! That worked nicely. Thanks.

 

Thanks Jack.