CODEWITHSUNDEEP
jqueryjquery-animatedelayed-execution
Mad coder.
Mad coder.

Reputation: 2175

jQuery delay and slow down sliding speed

The following code expands height of the DIV when hover function is performed and how can I change the code such that function has to take place if mouse is placed for 5 seconds. Also how can I slow down the sliding speed?

$(document).ready(function () {
    $("#myhead").hover(

    function () {
        $(this).animate({
            height: '+=250'
        }, '1000');
    }, function () {
        $(this).animate({
            height: '-=250px'
        }, '1000');
    });
});

Upvotes: 0

Views: 610

Answers (2)

Kamran Ali
Kamran Ali

Reputation: 5954

You can use this plugin for time based hover http://cherne.net/brian/resources/jquery.hoverIntent.html

this plugin calls the mousein and mouseout function after specific timeout.You can decrease the speed of sliding by 

$(document).ready(function () {
$("#myhead").hover(

function () {
    $(this).animate({
        height: '+=50',
    }, {duration:2000});
}, function () {
    $(this).animate({
        height: '-=50px'
    }, {duration:2000});
});

});

Upvotes: 2

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11124

There is a jQuery plugin called "hoverintent" which will allow you to write hover functions with a "timeout" property which does what you're describing.

http://archive.plugins.jquery.com/project/hoverIntent

The speed of the animation can be slowed by increasing the number after the animation-- in your current code it's "1000". That's in milliseconds, so 1000 is equal to 1 second.

Upvotes: 1

Related Questions