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.
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');
}
});