Question

I am using the jQuery hoverIntent plugin to fade in a div when another div is being hovered over. There are 4 elements that share a class name, and I only want to fade in the children of the element I am hovering over, not every div that shares the class’ children. The problem now is if I hover over one dive it fades in all 4 elements children. Where in my code little bit of code have I gone wrong?

Here’s the 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>

Here’s the 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');
}

});

Just in case anyone has a similar issue, I figured out the solution and posted it below.

Answer 1

Just figured it out. I added a this, to the line that sets the children into a variable, and also removed it from the .fadeIn and .fadeOut lines.

Here’s the new 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');
}

});