javascript - jQuery start hover animation when mouse stops - Stack Overflow

admin管理员组

文章数量:1289876

So I have a sliding door style animation that as of now fires off when the mouse hovers over the box (my example is provided below). Rather than it firing off immediately when the mouse hovers over the div I actually want the hover animation to only happen when the mouse stops on the div, much like it does in the chrome web store when you stop the mouse on one of the app containers ()

My Current Example /

EDIT: Just to clarify further , there would be multiple cells appearing on this page.

Thanks for any help you can provide!!

So I have a sliding door style animation that as of now fires off when the mouse hovers over the box (my example is provided below). Rather than it firing off immediately when the mouse hovers over the div I actually want the hover animation to only happen when the mouse stops on the div, much like it does in the chrome web store when you stop the mouse on one of the app containers (https://chrome.google./webstore/category/home)

My Current Example http://jsfiddle/fvXgK/

EDIT: Just to clarify further , there would be multiple cells appearing on this page.

Thanks for any help you can provide!!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 24, 2012 at 17:48 Stavros_S asked Jul 24, 2012 at 15:55 Stavros_SStavros_S 2,23577 gold badges3636 silver badges8080 bronze badges 1

• 1 This any good for you? jquery4u./events/writing-mousestop-event-plugin-jquery/… – Billy Moat Commented Jul 24, 2012 at 16:04

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

You can try the hoverintent plugin of jquery.

http://cherne/brian/resources/jquery.hoverIntent.html

My advice is to change your hover event. On hover get the mouse coordinates then start a timeout with maybe 50-100ms. Use the timeout to pare the current mouse coordinates with the original set of coordinates. If they are the same, and your animation has not been executed, then do the animation. This is just a rough idea of what you could try.

Edit: Also remember to make an on mouse out event that stops the timeout.

See this fiddle, easy to use:

http://jsfiddle/pbaXa/

this is how I would do it... it's just easier: plain and simple:

$('.smallCell.slidedown').hover(function() {
    $(".overlay", this).delay(1000).queue(function(){
    $(this).animate({
        top: '-260px'
    }, {
        queue: false,
        duration: 300
    });


    });
}, function() {
    $(".overlay", this).animate({
        top: '0px'
    }, {
        queue: false,
        duration: 300
    });
});

And this is also self explanatory: it will delay 1 second and queue your function.

You can use a setTimeout for this and paring to a stored "hover state" of the element. My example might not be the best way to store the hover state if you are using multiple cells, but the concept still stands.

var TIME_UNTIL_SLIDE = 1000;

var isHovering = false;
var hovertimer;

$('.smallCell.slidedown').hover(function() {
    isHovering = true;
    var $this = this;
    hovertimer = setTimeout(function(){
        if(isHovering) {
             $(".overlay", $this).stop().animate({
                top: '-260px'
            }, {
                queue: false,
                duration: 300
            });
        }
    }, TIME_UNTIL_SLIDE);

}, function() {
    isHovering = false;
    $(".overlay", this).stop().animate({
        top: '0px'
    }, {
        queue: false,
        duration: 300
    });
});

Shown at: http://jsfiddle/fvXgK/16/

Maybe you should try this plugin:

http://www.richardscarrott.co.uk/posts/view/jquery-mousestop-event

Easy to use and the example is just right there!

本文标签： javascriptjQuery start hover animation when mouse stopsStack Overflow