jquery hover - gsap animation not working

[knalle]

I have a looping animation on hover:

 

 

TweenMax.defaultOverwrite = "all";

 

$('#box a').hover(

function(){

$(this).addClass('hover'); // works

TweenMax.to( $("#box .arrowbar"), 0.5, {css:{left:7}, repeat:-1, ease:Linear.easeNone});

},

function(){

$(this).removeClass('hover'); // works

TweenMax.to( $("#box .arrowbar"), 0.5, {css:{left:7}});

}

);

 

 

It works on first mouseenter and mouseleave. What's wrong (using it in a html5boilerplate setup). Using Chrome atm.

[Carl]

Both your Tweens tween box arrow's left to 7.

It's very possible that when you roll over a second time that box arrow already has a left of 7 so thus there is nothing for your new repeating tween to do.

 

If possible. Please upload a simple set of files with just enough CSS/HTML/js to replicate the issue.

 

Very likely something else may be causing it but tough to say without testing.

[knalle]

Thanks for the reply

 

I have tried killing all tweens of the element (on unhover) - still not working the second time I hover

 

will try uploading soon.

[GreenSock]

Killing the tweens isn't the issue - it's just a logic flaw in your code. Your rollout tween is animating "left" to 7, but then when your rollover tween occurs again, it says "okay, I'll tween from....7 (current value)....to.....7 (destination value)" (no change). It is starting at exactly the same place you're asking it to end at. See what I mean?

 

Maybe you intended to have your rollout tween go to zero instead of 7, like:

TweenMax.to( $("#box .arrowbar"), 0.5, {css:{left:0}})

?