悬停函数的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);
    });