jQuery hoverIntent только для одного класса div, когда класс используется несколько раз

Question

Я использую плагин jQuery hoverIntent, чтобы исчезнуть в div, когда другой div находится над ним. Есть 4 элемента, которые имеют общее имя класса, и я хочу добавить только потомки элемента, над которым я намекаю, а не каждый элемент div, который разделяет дочерние элементы класса. Теперь проблема в том, что если я наведу курсор на одно погружение, оно исчезнет во всех четырех элементах потомков. Где в моем коде немного кода я ошибся?

Вот 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');
}

});