jQuery Fading in a Child Element When Parent Element is Clicked
-
16-06-2021 - |
Domanda
I am trying to fade in a child element when a parent element is clicked using jQuery
, but .children()
does not seem to be accomplishing what I am trying to do.
I attempting to make the <h2>
element fade in when the <h1>
element is clicked.
Javascript:
$(document).ready(function() {
$('h2').hide();
$('h1').bind('click', function() {
$(this).children().fadeIn(400);
});
});
Here is my code:
HTML:
<h1>
Visible Parent
<h2>
Hidden Child
</h2>
</h1>
A JSFiddle
of the code can be fouind here: http://jsfiddle.net/jHkAB/5/
SOLVED:
By separating the <h1>
and <h2>
elements and then using .next()
to select the element after the <h1>
element, the next element fades in when the element before it is clicked.
A JSFiddle
of the code can be found here: http://jsfiddle.net/bazmegakapa/jHkAB/16/.
Soluzione
Heading elements (h1
, h2
, etc.) cannot be contained in each other, so your HTML is normalized by the browser and becomes this:
<h1>
Visible Parent
</h1>
<h2>
Hidden Child
</h2>
That is why you animation won't trigger, because h2
is not a child of h1
anymore.