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

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

您可以通过将fadding效果应用于所有直接子节点而不是父节点来使用变通方法。

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

哪个应该按预期工作

jQuery：慢慢淡化父母，立即显示/隐藏孩子

3 个答案: