當多次使用該類時，只有一個div類的jQuery hoverIntent

Question

我正在使用jQuery hoverIntent插件在另一個div懸停時淡入div。有4個元素共享一個類名，我只想淡入我徘徊的元素的子元素，而不是每個分享類的子元素的div。現在的問題是，如果我在一次潛水中徘徊，它會在所有4個孩子中褪色。在我的代碼中哪裏有一點代碼我錯了？

這裏的HTML：

<div id="resources" class="faded"> 

<div class="resourcesHover"></div> 

</div> 

<div id="forBuilders" class="faded"> 

<div class="buildersHover"></div> 

</div> 

<div id="fam" class="faded"> 

<div class="famHover"></div> 

</div> 

<div id="homePlans" class="faded"> 

<div class="plansHover"></div> 

</div> 

這裏是jQuery的

$(document).ready(function(){ 

$(".faded").hoverIntent({ 
    over: fadeDivIn, 
    timeout: 300, 
    out:  fadeDivOut 
}); 

function fadeDivIn() { 
    var $kids = $('.faded').children(); 
    $($kids, this).fadeIn('slow'); 
} 

function fadeDivOut() { 
    var $kids = $('.faded').children(); 
    $($kids, this).fadeOut('slow'); 
} 

}); 

萬一有人有類似的問題，我想出瞭解決方案，並張貼在下面。

Answer 1

的所有元素只是想通了。我將this,添加到將子項設置爲變量的行中，並將其從.fadeIn和.fadeOut行中刪除。

這裏是新的jQuery：

$(document).ready(function(){ 

$(".faded").hoverIntent({ 
    over: fadeDivIn, 
    timeout: 300, 
    out:  fadeDivOut 
}); 

function fadeDivIn() { 
    var $kids = $(this,'.faded').children(); 
    $($kids).fadeIn('slow'); 
} 

function fadeDivOut() { 
    var $kids = $(this,'.faded').children(); 
    $($kids).fadeOut('slow'); 
} 

}); 

Answer 2

更改fadeDivIn和fadeDivOut功能如下：

function fadeDivIn() { 
    var $kids = $(this).children(); 
    $($kids).fadeIn('slow'); 
} 

function fadeDivOut() { 
    var $kids = $(this).children(); 
    $($kids).fadeOut('slow'); 
} 

Answer 3

在您的淡入淡出功能，您需要選擇this而不是類faded

$(document).ready(function(){ 

$(".faded").on('mouseover', function() { 
    fadeDivIn(this); 
}); 

$(".faded").on('mouseout', function() { 
    fadeDivOut(this); 
}); 

function fadeDivIn(hovered_over) { 
    var $kids = $(hovered_over).children(); 
    $($kids).fadeIn('slow'); 
} 

function fadeDivOut(hovered_over) { 
    var $kids = $(hovered_over).children(); 
    $($kids).fadeOut('slow'); 
} 

});