添加setTimeout方法会使jQuery悬停方法忽略setTimeout方法中的函数

Question

正如标题所说，如果我删除了setTimeout方法，它可以工作但我需要在函数触发之前延迟。

$( ".pa-wrap" ).hover(
    function() {
        $( this ).find( ".pa-ano-wrap" ).css({
            "display": "block", 
            "opacity": 0

        }).animate({
            "opacity": 0.8

        }, 200);
    }, function() {
        $( this ).find( ".pa-ano-wrap" ).animate({
            "opacity": 0

        }, 200);

        setTimeout(function() {
            $( this ).find( ".pa-ano" ).css({
                "height": "24px",
                "top": "-33px"
            });
        }, 201);
    }
);

Answer 1

那是因为this引用了setTimeout更改的当前上下文，因此您需要将其绑定到您想要的上下文：

setTimeout(function() {
// ...
}.bind(this), 201);

另外，我建议从性能和可读性的角度来缓存元素：

var paWrap = $('.pa-wrap');
paWrap.hover(function() {
    paWrap.find('.pa-ano-wrap').css({
// and so on
});

它还有助于解决所有this混淆，因为您始终知道this所指的内容。