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 に答える