当鼠标停止时，jQuery开始悬停动画

Question

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.com/webstore/category/home)

My Current Example http://jsfiddle.net/fvXgK/

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

Thanks for any help you can provide!!

Answer 1

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 compare 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.

Answer 2

You can try the hoverintent plugin of jquery.

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

Answer 3

See this fiddle, easy to use:

http://jsfiddle.net/pbaXa/

Answer 4

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.

Answer 5

You can use a setTimeout for this and comparing 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.net/fvXgK/16/

Answer 6

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!