如何在下面的代碼中添加setTimeout來延遲淡化動畫？

Question

我使用下面的淡入和淡出元素上hover：

$(".hidden").hover(function() { 
    $(this).animate({ 
    opacity: 1 
    }); 
}, function() { 
    $(this).animate({ 
    opacity: 0 
    }); 
}); 

我想補充的延遲不透明度1和不透明度0之間（稍等片刻，然後淡出元素）。

我該如何做到這一點？

Answer 1

Yuu可以使用.delay（）函數http://api.jquery.com/delay/。

$(".hidden").hover(function() { 
    $(this).delay(1000).animate({ 
    opacity: 1 
    }); 
}, function() { 
    $(this).delay(1000).animate({ 
    opacity: 0 
    }); 
}); 

http://jsfiddle.net/gk14nqrx/

Answer 2

$(".hidden").hover(function() { 
    $(this).animate({ 
    opacity: 1 
    }); 
}, function() { 
    var _this = $(this); 
    setTimeout(function(){ 
    _this.animate({ 
     opacity:0 
    }); 
    },1000) 

}); 

Answer 3

這會在淡出之前延遲1秒。您需要存儲對$（this）的引用，因爲在setTimeout中，這不再是DOM元素。

$(".hidden").hover(function() { 
    $(this).animate({ 
    opacity: 1 
    }); 
}, function() { 
    var that = $(this); 
    setTimeout(function() { 
     $(this).animate({ 
     opacity: 0 
     }); 
    }, 1000); 
});