jQuery setTimeout的悬停函数

Question

我的.hover函数工作正常，但现在.hover函数需要等待2秒才能启动但是我的代码无法正常工作。

JS代码

setTimeOut(function(){
        $('#sectionNews').hover(
            function() {

                    $(this).find('.underlay_wrapper').animate({
                        height: '85px', opacity: '1'
                    }, 1000 );

            },function() {
                $(this).find('.underlay_wrapper').animate({
                    height: '0px', opacity: '0'
                },500);

            }
        );
    }, 200);

Answer 1

如果您希望悬停代码在悬停后2秒开始，则必须将setTimeout置于悬停

var tOut = null;
$('#sectionNews').hover(function () {
   var $this=$(this);
  tOut=  setTimeout(function () { //Here
        $this.find('.underlay_wrapper').animate({
            height: '85px',
            opacity: '1'
        }, 1000);
    }, 2000);
}, function () {
    var $this = $(this);
    clearTimeout(tOut);
    setTimeout(function () {//here also if you want it to setTimeout when hover out
        $this.find('.underlay_wrapper').animate({
            height: '0px',
            opacity: '0'
        }, 500);
    }, 2000);
});

<强>更新

您可以使用.delay（2000）代替setTimeout来设置动画元素

$('#sectionNews').hover(function () {
        $(this).find('.underlay_wrapper').delay(2000).animate({
            height: '85px',
            opacity: '1'
        }, 1000);
}, function () {
        $(this).find('.underlay_wrapper').delay(2000).animate({
            height: '0px',
            opacity: '0'
        }, 500);
});

DEMO

Answer 2

试试这个

$('#sectionNews').hover(function () {
        var a = setInterval(function () {
            $(this).find('.underlay_wrapper').animate({
                height: '85px', opacity: '1'
            }, 1000);
            clearInterval(a);

        }, 2000);
    });