悬停功能的jQuery setTimeout [英] jQuery setTimeout of a hover function

问题描述

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

my .hover function work fine but now the .hover function needs to wait 2 seconds to start but something isnt working with my code.

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

推荐答案

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

If you want the hover code to start 2 seconds after hovering you must put the setTimeout inside hover

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来制作动画元素

You could use .delay(2000) instead of setTimeout for animating elements

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

演示

这篇关于悬停功能的jQuery setTimeout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！