jQuery: медленно выцветать родительский, показать/скрыть ребенка мгновенно

Question

Есть ли способ медленно вытеснить родительский элемент и создать дочерний элемент или мгновенно исчезнуть?

Я попытался это, но он не работает ..

HTML

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

JQuery

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

скрипку

https://jsfiddle.net/cpz3xoej/

Answer 1

Вы не можете, потому что для родителя применяется анимация замирания, которая, очевидно, включает в себя и ребенка.

Вы можете использовать обходной путь, применяя эффект подстилки ко всем прямым дочерним элементам, а не родительским.

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

Answer 2

вы можете попробовать использовать "полный" метод

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

Answer 3

Я слегка измененный код, как показано ниже:

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

который должен работать, как ожидалось