CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Stavros_S
Stavros_S

Reputation: 2235

jQuery start hover animation when mouse stops

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!!

Upvotes: 3

Views: 2833

Answers (6)

hradac
hradac

Reputation: 2491

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.

Upvotes: 3

Novak
Novak

Reputation: 2768

See this fiddle, easy to use:

http://jsfiddle.net/pbaXa/

Upvotes: 2

skywlkr
skywlkr

Reputation: 1465

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!

Upvotes: 1

Ben
Ben

Reputation: 867

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/

Upvotes: 1

rafaelbiten
rafaelbiten

Reputation: 6240

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.

Upvotes: 1

Karan Punamiya
Karan Punamiya

Reputation: 8863

You can try the hoverintent plugin of jquery.

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

Upvotes: 3

Related Questions