YSbakker YSbakker - 2 years ago 69
HTML Question

jquery fadein child issue

Just a short question, probably some syntax mistake, but I can't seem to find it. I have a function that animates a div's height and width using an id. I'm also trying to

the child paragraph using
. Is this possible? I looked around and tried different syntaxes like
. Here's the code concerned:


$('#menu_item_1').hover(function () {
width: "300px",
height: "255px",
marginTop: "-100px",
marginLeft: "-100px"


}, function () {
width: "200px",
height: "155px",
marginTop: "0",
marginLeft: "0"


<div class="menuItem" id="menu_item_1">
<p>Shows this page</p>

Also, a JSFiddle to demonstrate the issue: https://jsfiddle.net/w0uu5t7b/

Answer Source

Here is the demo

Remove the opacity:0 and make it display:none

And the $(this).find('p').fadeIn(); refers to the this of hover function and not jQuery.

So its better to store jQuery reference as var that = this and use it as a closure inside the hover function.

So on mouse enter you do $(that).find('p').fadeIn(); and on mouse leave you do $(that).find('p').fadeIn(); as simple as it can get.

P.S Read up more about javascript closures :P

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download