jquery - 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

以下のようにコードを少し変更しました。

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

期待どおりに動作するはずです

Answer 2

you can try to use "complete" method

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