Question

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

我想滑动外部div，而外部div向下滑动，内部div应该是fadein。

我不想淡入滑落的外部div！

我通过给内部内容一个最小高度并且淡入其中来使用一些workarround。但是当内部内容具有可变高度时它会变得混乱......

这个问题有一个很好的解决方案吗？

我创造了一个小提琴来演示我的问题： 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;
}

Answer 1

传递queue: false参数：

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

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

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

1 个答案: