ユーザーがボタンをクリックすると、問題のdivは次のようになります。
ユーザーがボタンをもう一度クリックすると、divは次のようになります。
これは、fadeInとfadeOutが適切なタイミングで発生しているが、fadeInとfadeOutの前後にそれぞれスライド効果がない例です
http://jsfiddle.net/tkRGU/1/
また、slideToggle機能はありますが、スライドの前後でそれぞれフェードインとフェードアウトが発生しないこのオプションがあります。
http://jsfiddle.net/MY8DD/7/
これはうまくいきます：
HTML:
<a href="#" onclick="toggleSlider();">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
<div id="contentThatFades" style="opacity:0;filter:alpha(opacity=0);">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor erat, et consectetur nisl. Nunc non placerat odio. Cras feugiat pulvinar diam sed sollicitudin. Quisque ut elit lacus, et gravida nunc. Maecenas ac enim ligula. Aenean felis nunc, vulputate pellentesque vehicula nec, tristique a tortor. Curabitur et semper dui. Sed id nisl turpis. Sed vel nunc et nisi laoreet feugiat. Sed lobortis enim sed arcu tempor vehicula. Vivamus dui ligula, ultricies id egestas ut, rhoncus et est. Pellentesque dignissim diam vel nibh tempus condimentum. Etiam sodales fermentum pharetra. Etiam faucibus tempus malesuada. Mauris nulla lectus, laoreet sit amet cursus vel, ultricies at enim. Sed facilisis rutrum eros, nec malesuada eros iaculis ac.
<br /><br />
In consectetur faucibus fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nunc magna, vestibulum eget pulvinar hendrerit, tincidunt id arcu. Nullam dolor ligula, suscipit placerat condimentum ac, feugiat ut mauris. Suspendisse semper dolor condimentum dui ornare rhoncus. In bibendum massa vel erat tristique congue. Donec vel mi quam, ac iaculis odio. Nulla interdum orci quis ligula aliquam viverra. Nam eget egestas mauris. Sed in massa quis erat venenatis aliquam.
</div>
</div>
Javascript:
function toggleSlider() {
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").animate(
{
opacity: "0"
},
600,
function(){
$("#panelThatSlides").slideUp();
}
);
}
else {
$("#panelThatSlides").slideDown(600, function(){
$("#contentThatFades").animate(
{
opacity: "1"
},
600
);
});
}
}
IE の場合は、cleartype のコンテンツの背後に背景色があることを確認してください。
2 つの操作を同時に実行したいので、animate 関数を使用する必要があるように思えます。そうしないと、アクションが次々と発生します。
実行する前に要素の高さがわかっている場合は、かなり簡単に設定できます。これは非常に大まかな例です: http://jsfiddle.net/tArQu/
$("#button").toggle(function(){
$("#content").slideDown().fadeIn();
}, function(){
$("#content").slideUp().fadeOut();
return false;
});
それはあなたが求めているものですか？
要素の高さが事前にわからない場合は、少し複雑になります。フェードするには、不透明度を直接アニメーション化する必要があります。また、コンテンツが「スライド」している間は、CSSの可視性でコンテンツを非表示にする必要があります。
CSSの可視性を「非表示」にすると、コンテンツは通常のドキュメント内のスペースを占めることができますが、ビューからは非表示になります。CSS表示「none」は、要素を非表示にするだけでなく、ドキュメントフローから削除します。可視性を使用して要素を非表示にすることで、要素のコンテンツが非表示のままで、要素が完全な高さになるまで下にスライドできます。
同様に、jQueryのfadeIn関数を使用する際のコンテンツのフェードは、要素が最初は表示「none」で非表示になっていることを前提としているため、可視性を使用すると機能しません。代わりに、要素を最初は完全に透明にします（不透明度0.0）。スライドアニメーションが完了したら、可視性を「可視」に設定し、不透明度を完全に透明から完全に不透明（0.0から1.0）にアニメーション化します。
要素が最初に非表示になっていると仮定します（CSSは「none」またはjQuery非表示関数を表示します）：
$(element).css("visibility", "hidden").slideDown("slow", function() {
$(this).css("opacity", 0.0).css("visibility", "visible").animate({
"opacity": 1.0
}, "slow");
});
注意：「visibility」と「visible」はスペルミスが発生しやすいため、特に注意して入力してください。これは、多くの苛立たしいバグの原因です。
コンテンツを最初に透明にすることで同じことを達成できるため、可視性を使用する必要はありませんが、可視性を使用すると、何が起こっているのかがより明確になります。つまり、これも機能します。
$(element).css("opacity", 0.0).slideDown("slow", function() {
$(this).animate({
"opacity": 1.0
}, "slow");
});
これを試してみてください：http://jsfiddle.net/solidsource/67XZX/