当用户点击按钮时，有问题的 div 将：
当用户再次点击按钮时，div会：
这是一个示例，其中 fadeIn 和 fadeOut 在正确的时间发生，但在 fadeIn 之前和之后没有 slide 效果和fadeOut分别
http://jsfiddle.net/tkRGU/1/
还有一个选项，它具有 slideToggle 功能，但没有分别在幻灯片之后和之前发生的 fadeIn 和 fadeOut。
http://jsfiddle.net/MY8DD/7/
【问题讨论】：
标签： jquery toggle fadein fadeout slidetoggle
这将起作用：
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 的内容后面有背景颜色。
【讨论】：
onmouseover 和onmouseout 触发器尝试了那个脚本，但它不能正常工作。有时，当onmouseover 触发时，div 会立即淡入淡出。比切换开始失败，div 淡入而onmouseout 触发等。我可以有你的建议吗？
如果事先不知道元素的高度，稍微复杂一点。您必须直接为不透明度设置动画以淡化，并且必须在“滑动”时使用 CSS 可见性隐藏内容。
CSS 可见性“隐藏”允许内容占据文档中正常的空间，但在视图中隐藏； CSS display "none" 不仅隐藏元素，还将它从文档流中移除。通过使用可见性隐藏元素，我们可以将其向下滑动直到它的全高，而元素的内容保持不可见。
类似地，使用jQuery的fadeIn函数淡化内容假设一个元素最初是隐藏的，显示为“none”，所以如果我们使用可见性，它将不起作用。相反，我们使元素最初完全透明（不透明度 0.0）；滑动动画完成后，我们将可见性设置为“可见”，然后将不透明度从完全透明设置为完全不透明（0.0 到 1.0）。
假设元素最初是隐藏的（CSS 显示“无”或 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");
});
【讨论】：
听起来你希望这两个操作同时发生，你应该使用animate function。否则动作会一个接一个。
如果您在运行之前知道元素的高度，那么您可以相当轻松地进行设置。这是一个非常粗略的例子：http://jsfiddle.net/tArQu/
【讨论】：
【讨论】：
$("#button").toggle(function(){
$("#content").slideDown().fadeIn();
}, function(){
$("#content").slideUp().fadeOut();
return false;
});
你追求的是什么？
【讨论】：