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

回答

相關問題