I have an animation running and moving around on mouseenter, this is the code:
$(".still").mouseenter(function () {
w1.goToAndPlay(0);
$("#w1").delay(300);
$("#w1").animate({left: '-200px'}, 1700, function() {
$("#w1").delay(550);
$("#w1").animate({left: '0px'}, 2500);
});
})
There's just one big problem I couldn't get around: If I get the pointer out and in again, the animation itself resets (goToAndPlay) and the animate function keeps going and going. Now what I wanted to achieve is to "freeze" the mouseenter function until everything is done.
This is what I tried and seems logical but it doesn't work:
$(".still").mouseenter(function () {
w1.goToAndPlay(0);
$("#w1").delay(300);
$("#w1").animate({left: '-200px'}, 1700, function() {
$("#w1").delay(550);
$("#w1").animate({left: '0px'}, 2500, function() {
$(this).attr("class","still");
});
});
}).mouseleave(function () {
$(this).attr("class","moving");
});
So, I thought: "If I change the class while the animation is moving or the user moves the pointer out of it, then '.still' selecter of mouseenter will not work anymore" but this is apparently wrong because apparently the mouseenter is working even when the class is changed. What am I missing? Thank you!