0

Is there a way to fade a parent element slowly and have a child element appear or disappear instantly?

I tried this, but it doesn't work..

html

<figure>
    <p>Foo Figure...</p>
    <figcaption>Bar Caption...</figcaption>
</figure>

jQuery

$('figure').hide();
$('figure').fadeIn({
    duration: 1000,
    start: function(){
         $(this).find('figcaption').show();
    }});

fiddle

https://jsfiddle.net/cpz3xoej/

Rotareti
  • 49,483
  • 23
  • 112
  • 108
  • 1
    You can hide child instantly while parent is shown but surely not show it instantly if parent is fading slowly. Meaning, you cannot get a child visible if parent is hidden – A. Wolff Nov 02 '15 at 10:01

3 Answers3

2

You can not because fading animation is applied to parent which obviously includes child too.

You can use a workaround by applying the fadding effect to all the direct child, instead of the parent.

$('figure > *').hide();
$('figure > *').fadeIn({
    duration: 1000,
    start:function(){
        $(this).parent().find('figcaption').show();
    }
});
Delgan
  • 18,571
  • 11
  • 90
  • 141
0

you can try to use "complete" method

$('figure').hide();
$('figcaption').hide()
$('figure').fadeIn({
duration: 1000,
complete:function(){
    $(this).find('figcaption').show();
}});
Ray Lloy
  • 171
  • 12
  • This does not make the child appear instantly. It makes the child pop in after the fade is complete. See here: https://jsfiddle.net/L7kzbdua/ – Rotareti Nov 02 '15 at 10:32
0

I slightly modified your code as below:

$(document).ready(function () {
    $('figure').hide();
    $('figure figcaption').hide();
    $('figure').fadeIn({
        duration: 1000,
        complete: function () {
            $(this).find('figcaption').fadeIn({duration: 400});
        }
    });
});

Which should work as expected

Ellison
  • 1
  • 2
  • This does not make the child appear instantly. It makes the child pop in after the fade is complete. – Rotareti Nov 02 '15 at 11:46