Hi there,
Hopefully a quick question/answer.
I have a few animations set on elements all doing pretty much the same thing but to different classes. However, when I mouseenter and mouseleave very quickly the animation will “bug” and play another “frame” (ie. play the animations from start to finish one more time even though there are only, for example, 3 instances of me moving my mouse in and out of the object).
Does anyone have any solutions as to how I could stop this from happening? :). As you can see I’ve tried putting a stop on the mouseenter but it isn’t doing anything. I’ve also tried stop(true); but again no results…any thoughts please?
$(document).ready(function(){
$("div.project").mouseenter(function(){
$(this).find("img").animate({width:'120%',height:'120%', left:'-20px',top:'-20px'},100)
$(this).find(".overlay-project1").animate({opacity: 0.9},"fast")
$(this).find(".overlay-project2").animate({opacity: 0.95},"fast")
$(this).find(".overlay-project3").animate({opacity: 0.95},"fast")
mouseenter.stop(true,true);
});
$("div.project").mouseleave(function(){
$(this).find("img").animate({width:'100%',height:'100%', left:'0px', top:'0px'},"fast")
$(this).find(".featured").animate({opacity:1},200)
$(this).find(".overlay-project1").animate({opacity: 0},"fast")
$(this).find(".overlay-project2").animate({opacity: 0},"fast")
$(this).find(".overlay-project3").animate({opacity: 0},"fast")
mouseleave.stop(true,true);
});
});
Cheers,
Shoxt3r