Question

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');
    });
});

Answer 1

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});
});

});