Stop Animation on Mouseleave

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? :slight_smile:


	$(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

You may need to stop things before performing the animation.

See for example from jQuery’s .stop() documentation page:


$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});

So in your code, you could do that with:


$("div.project").mouseenter(function(){
    $(this).find("img").stop(true, true).animate({width:'120%',height:'120%', left:'-20px',top:'-20px'},100)
    $(this).find(".overlay-project1").stop(true, true).animate({opacity: 0.9},"fast")
    $(this).find(".overlay-project2").stop(true, true).animate({opacity: 0.95},"fast")
    $(this).find(".overlay-project3").stop(true, true).animate({opacity: 0.95},"fast")
    mouseenter.stop(true,true);
});

Or, to remove some of the duplication:


$("div.project").mouseenter(function(){
    function animateProject(project, opacityPercentage) {
        $(this).find(project).stop(true, true).animate({opacity: opacityPercentage}), 'fast');
    }

    $(this).find("img").stop(true, true).animate({width:'120%',height:'120%', left:'-20px',top:'-20px'},100);
    animateProject('.overlay-project1', 0.9);
    animateProject('.overlay-project2', 0.95);
    animateProject('.overlay-project3', 0.95);
});

Or, if you don’t mind 0.95 being used for all of them:


$("div.project").mouseenter(function(){
    $(this).find("img").stop(true, true).animate({width:'120%',height:'120%', left:'-20px',top:'-20px'},100);
    $('.overlay-project1, .overlay-project2, .overlay-project3').stop(true, true).animate({opacity: 0.95}), 'fast');
});

And if you can break out of the bad habit of using numbered class names - better solutions await you too :slight_smile:

Fantastic! Thanks very much for your help. I’m just running a few demos at the moment so the numbered classes are temporary I can assure you! :slight_smile:

Hi there,

Sorry for the late reply (almost two weeks!). I’ve since tried to implement this solution and it has a script error but I can’t for the life of me figure out what’s wrong. It’s saying “unexpected token” and pointing out the } underneath the function…? Any thoughts? :slight_smile:

Thanks for getting back in touch. It looks like the animate method has an extra closing parenthesis.

$(this).find(project).stop(true, true).animate({opacity: opacityPercentage}), 'fast');

It should instead be:

$(this).find(project).stop(true, true).animate({opacity: opacityPercentage}, 'fast');