Jquery：没有选择淡入淡出的父div

我有一个mouseover函数，但是当我尝试淡入optionbox时，它会将其应用于所有名为'box'的类。我试图在那里设置this，但是我的jQuery技能（如果我已经有一些）已经让我失望了。Jquery：没有选择淡入淡出的父div

除了这个问题，代码工作正常。

$(".box").live({ 
    mouseenter: 
     function() 
     { 
     optionsTimeout = setTimeout(

      function() { 
       $('.optionbox').fadeIn(200); 
      } 

     , 1000); 
     }, 
    mouseleave: 
     function() 
     { 
     clearTimeout(optionsTimeout); 
     $('.optionbox').fadeOut(200); 
     } 
    } 
);

HTML：

<div class="box"> 
    <div class="optionbox"><a href="">Delete</a></div> 
</div> 
<div class="box"> 
    <div class="optionbox"><a href="">Delete</a></div> 
</div>

来源

2012-03-06 Mike

HTML的示例会很好 - 否则我们不知道您需要定位哪些内容。哦，仅供参考，如果您使用jQuery 1.7或更高版本，您应该使用.on（）而不是live。 – 2012-03-06 21:41:18

mouseenter: function() { 
    (function (self) { 
     var optionsTimeout = setTimeout(function() { 
      $('.optionbox', self).fadeIn(200); 
     }, 1000); 
     self.data('showTimeout', optionsTimeout); 
    })($(this)); 
}, 
mouseleave: function() { 
    var self = $(this), 
     optionsTimeout = self.data('showTimeout'); 
    clearTimeout(optionsTimeout); 
    $('.optionbox', this).fadeOut(200); 
}

你需要告诉jQuery来上下文.box中使用的元素，因此使用$(selector, context)。

带自我的封闭函数是在超时执行期间保存对上下文的引用，因此您将其作为自我可执行函数的参数传递，并且当超时到期时，它将引用执行.box

对于所有超时，您也可能遇到问题，因此您可以保存每个超时代码的上下文超时代码，在我的示例中，我使用$.data保存代码并进行恢复。

来源

2012-03-06 21:57:25 guzart

使用this处理程序的上下文中（该.box元素）：

$(this).find('.optionbox').fadeIn(200);

.find()

来源

2012-03-06 21:42:24

将其更改为$(this).find('.optionbox')只得到元素在目前元件。

来源

2012-03-06 21:50:27

试试这个：

$(".box").live({ 
    mouseenter: function() { 
     var $that = $(this); 
     optionsTimeout = setTimeout(function() { 
      $that.find('.optionbox').fadeIn(200); 
     }, 1000); 
    }, 
    mouseleave: function() { 
     clearTimeout(optionsTimeout); 
     $(this).find('.optionbox').fadeOut(200); 
    } 
});

来源

2012-03-06 21:52:14 bfavaretto

+1表示$ :) – 2012-03-06 21:55:00

Jquery：没有选择淡入淡出的父div

回答

相关问题