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

你不能因为褪色动画应用于显然也包括孩子的父母。

您可以通过将淡入淡出效果应用到所有直接子代而不是父代来使用解决方法。

$('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});
        }
    });
});

哪个应该按预期工作