jQuery：慢慢淡出父项，立即显示/隐藏子项

是否有办法淡化父项元素并使子元素立即显示或消失？jQuery：慢慢淡出父项，立即显示/隐藏子项

我想这一点，但它不工作..

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/

来源

2015-11-02 Rotareti

您可以隐藏子即时显示父母，但如果父母慢慢衰落，则肯定不会立即显示。意思是，如果父母隐藏，你不能看到子女 –

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

您可以通过将填色效果应用于所有直接子项而不是父项来使用替代方法。

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

来源

2015-11-02 10:10:33 Delgan

这只适用于假设图形本身没有隐藏。问题仍未解决。 – Rotareti

你说得对。是不可能的。 – Rotareti

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

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

来源

2015-11-02 10:24:47

这并不会让孩子立即出现。它使得孩子在淡入淡出后流行起来。看到这里：https://jsfiddle.net/L7kzbdua/ – Rotareti

我稍微修改如下代码：

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

哪些应该按预期工作

来源

2015-11-02 11:33:55 Ellison

这不会让孩子立即出现。它使得孩子在淡入淡出后流行起来。 – Rotareti

jQuery：慢慢淡出父项，立即显示/隐藏子项

回答

相关问题