SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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?

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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    You may need to stop things before performing the animation.

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

    Code javascript:
    $('#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:

    Code javascript:
    $("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:

    Code javascript:
    $("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:

    Code javascript:
    $("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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You may need to stop things before performing the animation.

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

    Code javascript:
    $('#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:

    Code javascript:
    $("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:

    Code javascript:
    $("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:

    Code javascript:
    $("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
    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!

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You may need to stop things before performing the animation.

    Or, to remove some of the duplication:

    Code javascript:
    $("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);
    });
    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?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shoxt3r View Post
    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?
    Thanks for getting back in touch. It looks like the animate method has an extra closing parenthesis.

    Code:
    $(this).find(project).stop(true, true).animate({opacity: opacityPercentage}), 'fast');
    It should instead be:

    Code javascript:
    $(this).find(project).stop(true, true).animate({opacity: opacityPercentage}, 'fast');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •