CODEWITHSUNDEEP
jqueryjquery-animatemouseover
Mubeen
Mubeen

Reputation: 2492

how to give time delay for mouseover

I have a following code

$(document).ready(function(){

    //When mouse rolls over
    $("#nav #nav_li").mouseover(function(){
        $(this).stop().animate({height:'140px', width:'182px'},{queue:false, duration:600})
    });

    //When mouse is removed
    $("#nav #nav_li").mouseout(function(){
        $(this).stop().animate({height:'11px', width:'146px'},{queue:false, duration:900})
    });


});

In that when i do mouse over its suddenly animate works

when i hover the #nav_li it will animate after few seconds

Thank you folks

Upvotes: 0

Views: 854

Answers (1)

Sarfraz
Sarfraz

Reputation: 382656

AFAIK, there is jQuery plugin HoverIntent to deal with that issue.

overIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It works like (and was derived from) jQuery's built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call.

Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent.

Upvotes: 1

Related Questions