jQuery：慢慢淡出父级，立即显示/隐藏子级答案

【问题标题】：jQuery: fade parent slowly, show / hide child instantlyjQuery：慢慢淡出父级，立即显示/隐藏子级
【发布时间】：2015-11-02 09:58:29
【问题描述】：

有没有办法让父元素慢慢淡化，让子元素立即出现或消失？

我试过了，但它不起作用..

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/

【问题讨论】：

您可以在显示父级时立即隐藏子级，但如果父级缓慢消失，则肯定不会立即显示它。意思是，如果父项被隐藏，您将无法看到子项

标签： jquery parent fade children instant

【解决方案1】：

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

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

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

【讨论】：

这仅在图形本身未被隐藏的情况下才有效。问题仍未解决。

【解决方案2】：

你可以尝试使用“完成”的方法

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

【讨论】：

这不会让孩子立即出现。它使孩子在淡入淡出完成后弹出。见这里：jsfiddle.net/L7kzbdua

【解决方案3】：

我稍微修改了你的代码如下：

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

应该按预期工作

【讨论】：

这不会让孩子立即出现。它使孩子在淡入淡出完成后弹出。