jQuery - Hover on a Parent div to FadeIn/Out Child div select problem

Page 1 of 1

2 Replies - 9644 Views - Last Post: 27 April 2012 - 10:22 AM

#1 ernestlwl   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 13-September 11

jQuery - Hover on a Parent div to FadeIn/Out Child div select problem

Posted 21 April 2012 - 11:07 PM

Hello Webdesigners,

I really have no idea why this isn't working, I've tried everything, by using .next(), .sibling(), .parent(), .children(). Non of them seemed to worked.

<html>
<head>
<script src="js/jQuery.js"></script>
<style> .child { display:none; } </style>
</head>

<body>
<div class='parent'> Parent 1 - <div class='child'>Child 1</div> </div>
<div class='parent'> Parent 2 - <div class='child'>Child 2</div> </div>
<div class='parent'> Parent 3 - <div class='child'>Child 3</div> </div>

<script type="text/javascript">
$( function()
{

// NON OF THESE WORK

$('.parent').hover(
	function() { $(this).next('child').fadeIn('slow');  },
	function() { $(this).next('child').fadeOut('slow'); }
);
$('.parent').hover(
	function() { $(this).parent().next('child').fadeIn('slow');  },
	function() { $(this).parent().next('child').fadeOut('slow'); }
);
$('.parent').hover(
	function() { $(this).sibling('child').fadeIn('slow');  },
	function() { $(this).sibling('child').fadeOut('slow'); }
);
$('.parent').hover(
	function() { $(this).parent().sibling('child').fadeIn('slow');  },
	function() { $(this).parent().sibling('child').fadeOut('slow'); }
);
$('.parent').hover(
	function() { $(this).children('child').fadeIn('slow');  },
	function() { $(this).children('child').fadeOut('slow'); }
);
$('.parent').hover(
	function() { $(this).parent().children('child').fadeIn('slow');  },
	function() { $(this).parent().children('child').fadeOut('slow'); }
);

} );

</script>
</body>
</html>


I know fadeIn automatically displays a display:none class, so probably that is not the problem.
Can anyone help me find what is missing here?
Thank you for your help

EDIT:
What does work is by just using the .css() or pure CSS parent:hover, but there is no animation which defeats the purpose of using jQuery

This post has been edited by ernestlwl: 21 April 2012 - 11:10 PM


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery - Hover on a Parent div to FadeIn/Out Child div select problem

#2 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: jQuery - Hover on a Parent div to FadeIn/Out Child div select problem

Posted 23 April 2012 - 04:53 AM

Hmm, I haven't tested this (haven't got my dev kit here), but try changing line 13 to this:
$.( function()

...or remove lines 13, 14, abd 43 altogether. Also, just test the $('.parent').hover( commands one at a time, otherwise you'll get haywire results.

If you're still having trouble I'll have a look tomorrow morning during my "personal project" time, where I don't have to deal with douchebag clients :P
Was This Post Helpful? 0
  • +
  • -

#3 maxfarnham   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 5
  • Joined: 27-April 12

Re: jQuery - Hover on a Parent div to FadeIn/Out Child div select problem

Posted 27 April 2012 - 10:22 AM

First off, I think instead of this:
$( function()

You mean:
$(document).ready(function()


You were almost onto it with this:
$('.parent').hover(
	function() { $(this).children('child').fadeIn('slow');  },
	function() { $(this).children('child').fadeOut('slow'); }
);

Remember .children is going to be return an array; you can't call fadeIn or fadeOut until you tell the javascript what element of the array to be executing these on. You can do this with the .first() selector, which when used in conjuction with the .children() selector will select the first child of the parent. This works:
$('.parent').hover(
	function () {$(this).children().first().fadeIn("slow");},
	function () {$(this).children().first().fadeOut("slow");}
);


Actually, scratch what I just posted. Your problem is here:
$('.parent').hover(
	function() { $(this).children('child').fadeIn('slow');  },
	function() { $(this).children('child').fadeOut('slow'); }
);

You're not selecting right. You're using 'child' instead of '.child'. It needs to look like this:
$('.parent').hover(
	function() { $(this).children('.child').fadeIn('slow');  },
	function() { $(this).children('.child').fadeOut('slow'); }
);


I only posted the .first() method because it's what I generally use since it's easier to transfer project to project as the first child's name doesnt matter.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1