javascript - How do I stop a bouncy JQuery animation? - Stack Overflow

admin管理员组

文章数量:1405343

In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.

The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's pleted 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)

Okay, now for the code. Here's the basic JQuery that I'm using:

$('.slider').hover(
    /* mouseover */
    function(){
        $(this).animate({
            top : '-=120'
        }, 300);
    },
    /* mouseout*/
    function(){
        $(this).animate({
            top : '+=120'
        }, 300);
    }
);

I've also recreated the behavior in a JSFiddle.

Any ideas on what's going on? :)

==EDIT== UPDATED JSFiddle

In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.

The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's pleted 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)

Okay, now for the code. Here's the basic JQuery that I'm using:

$('.slider').hover(
    /* mouseover */
    function(){
        $(this).animate({
            top : '-=120'
        }, 300);
    },
    /* mouseout*/
    function(){
        $(this).animate({
            top : '+=120'
        }, 300);
    }
);

I've also recreated the behavior in a JSFiddle.

Any ideas on what's going on? :)

==EDIT== UPDATED JSFiddle

• javascript
• jquery
• animation
• sliding

Share Improve this question Follow edited Jun 4, 2012 at 14:54 Miguel asked Jun 4, 2012 at 14:44 MiguelMiguel 1,97422 gold badges1818 silver badges3333 bronze badges 10

• It seems to only slide up and down once for me when I remove it quickly in the fiddle – Hunter McMillen Commented Jun 4, 2012 at 14:47
• When you hover over innerContent, it moves up, thus making it no longer under the mouse, firing the mouseleave event causing it to animate back to it's original position. What are you actually trying to do? – Kevin B Commented Jun 4, 2012 at 14:47
• @Kevin, the problem he is stating is that sometimes when you move the mouse over the slider only once, the animation performs multiple cycles i.e., going up and down multiple times. – sv_in Commented Jun 4, 2012 at 14:52
• @sv_in Right, but that is caused by the div animating out from under the mouse, triggering the leave event, which in turn triggers the enter event yet again when it animates back down, and then the leave yet again, causing a loop. – Kevin B Commented Jun 4, 2012 at 14:53
• 1 See my updated answer, i solved the flicker. – Kevin B Commented Jun 4, 2012 at 15:57

 |  Show 5 more ments

5 Answers 5

Sorted by: Reset to default 3

It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.

http://jsfiddle/W5EsJ/18/

If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.

You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)

Update

I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!

http://jsfiddle/W5EsJ/20/

$(document).ready(function() {
    var timer;
    $('.slider').hover(
        /* mouseover */
        function(){
            var self = this;
            timer = setTimeout(function(){
                $(self).stop(true,true).animate({
                    top : '-=120'
                }, 300).addClass('visible');
            },150)
        },
        /* mouseout*/
        function(){
            clearTimeout(timer);
            $(this).filter(".visible").stop(true,true).animate({
                top : '+=120'
            }, 300).removeClass("visible");
        }
    );
});

You could use .stop() and also use the outer container position

$(document).ready(function() {
    $('.slider').hover(
        /* mouseover */
        function(){
            $(this).stop().animate({
                    top : $('.outer').position().top
            }, 300);
        },
        /* mouseout*/
        function(){
            $(this).stop().animate({
                top : $('.outer').position().top + 120
            }, 300);
        }
    );
});
​

DEMO

Hope this helps

Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.

Add following piece of code to check if the div is already 'animating':

if ($(this).is(':animated')) {
   return;
}

Code: http://jsfiddle/W5EsJ/2/
Reference:http://api.jquery./animated-selector/

I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover

The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne/brian/resources/jquery.hoverIntent.html

If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent

本文标签： javascriptHow do I stop a bouncy JQuery animationStack Overflow