使用 jQuery 同时向下滑动 div 和 .fadeIn() 内容，反之亦然？

Posted 2023-05-08

【中文标题】使用 jQuery 同时向下滑动 div 和 .fadeIn() 内容，反之亦然？

【英文标题】：Slide down a div and .fadeIn() the content simultaneously and vice versa with jQuery?

【发布时间】：2013-03-02 20:44:36

【问题描述】：

我有一个包含内部 div 的外部 div。

我想滑动外部 div，当外部 div 向下滑动时，内部 div 应该淡入。

我不想在向下滑动的外部 div 中淡入淡出！

我通过给内部内容一个最小高度并将其淡入来使它与一些解决方法一起工作。但是当内部内容具有可变高度时，它会变得混乱..

这个问题有没有好的解决方案？

我创建了一个小提琴来演示我的问题： http://jsfiddle.net/6Brxv/

代码： html:

<a href="#" onclick="$('#outer1').slideToggle().find('.inner div').fadeToggle();">Toggle (will work)</a>

<div id="outer1" class="outer">
    <div class="inner">
        <div class="item">Hallo1</div>
    </div>
    <div class="inner">
        <div class="item">Hallo2</div>
    </div>
    <div class="inner">
        <div class="item">Hallo3</div>
    </div>
</div> 

<br /><br />

<a href="#" onclick="$('#outer2').slideToggle().find('.inner div').fadeToggle();">Toggle (will not work)</a>

<div id="outer2" class="outer">
    <div class="inner">
        <div class="item">Hallo1! We have more height than 50px! <br />#<br />#<br />#<br />#<br />#<br />#</div>
    </div>
    <div class="inner">
        <div class="item">Hallo2! We have more height than 50px! <br />#<br />#<br />#<br />#<br />#<br />#</div>
    </div>
    <div class="inner">
        <div class="item">Hallo3! We have more height than 50px! <br />#<br />#<br />#<br />#<br />#<br />#</div>
    </div>
</div> 

CSS：

.outer 
    background-color: red;    


.inner 
    min-height: 50px;

【问题讨论】：

***.com/questions/7520366/…

请修改一下并将其链接放在这里。这对回答者有帮助

什么是'变得凌乱'是什么意思？我只是想知道。

我发布了代码来产生我的问题，并摆弄来演示。上面发布的***.com/questions/7520366/… 链接不是（！）我想要的。

【参考方案1】：

传递queue: false参数：

$('#element').fadeIn( duration: 1000, queue: false );
$('#child').slideDown(1000);

这将允许 jQuery 移动到幻灯片上而无需等待淡入淡出完成。

【讨论】：

查看我的编辑。我相信这应该有效。我不明白为什么你需要淡入与父母动画分开的孩子。它会给你同样的效果。

感谢工作！这里是我的示例工作：jsfiddle.net/6Brxv/1

我现在明白我做错了什么。我试着先滑下来然后淡入。通过开始淡入元素，元素具有完整的“高度”，因此滑动可以正常工作。感谢您的帮助！