0

我有一个包含内部 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;
}
4

1 回答 1

3

传递queue: false参数：

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

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

于 2013-03-14T13:27:48.000 回答