如何向下滑动div然后.fadeIn（）内容，反之亦然？
目标
当用户单击该按钮时，相关div将：
- 滑下
- 停
- 淡出内容
当用户再次单击该按钮时，div将：
- 淡出
- 停
- 向上滑动
当前位置
这是一个fadeIn和fadeOut在正确的时间发生的例子，但fadeIn和fadeOut之前和之后都没有滑动效果
http://jsfiddle.net/tkRGU/1/
此选项还有slideTogglefunction，但分别在幻灯片之前和之后没有出现fadeIn和fadeOut 。
http://jsfiddle.net/MY8DD/7/
这将有效：
HTML：
toggle 使用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 ); }); } }
关于JS Fiddle的工作示例 。
对于IE，只需确保内容背后的背景颜色为cleartype。
听起来好像你想要两个操作同时发生，你应该使用animate函数 。 否则行动将陆续到来。
如果您在运行之前知道元素的高度，那么您可以相当容易地设置元素。 这是一个非常粗略的例子： http ： //jsfiddle.net/tArQu/
$("#button").toggle(function(){ $("#content").slideDown().fadeIn(); }, function(){ $("#content").slideUp().fadeOut(); return false; });
那你在追求什么？
如果您事先不知道元素的高度，则会稍微复杂一些。 您必须直接为不透明度设置动画以淡化，并且必须在“滑动”时使用CSS可见性隐藏内容。
CSS可见性“隐藏”允许内容占据文档中通常会占用的空间，但是从视图中隐藏; CSS显示“无”不仅隐藏元素，而是将其从文档流中删除。 通过使用可见性隐藏元素，我们可以将其向下滑动直到它达到其全高，同时元素的内容保持不可见。
类似地，使用jQuery的fadeIn函数中的淡入淡出内容假定元素最初被隐藏，显示“无”，因此如果我们使用可见性它将不起作用。 相反，我们使元素最初完全透明（不透明度为0.0）; 一旦滑动动画完成，我们将可见性设置为“可见”，然后将不透明度从完全透明设置为完全不透明（0.0到1.0）。
假设元素最初被隐藏（CSS显示“无”或jQuery隐藏function）：
$(element).css("visibility", "hidden").slideDown("slow", function() { $(this).css("opacity", 0.0).css("visibility", "visible").animate({ "opacity": 1.0 }, "slow"); });
注意：要特别小心地键入“可见性”和“可见”，因为它们容易拼错 – 这是许多令人沮丧的错误的根源。
您不必使用可见性，因为您可以通过使内容最初透明来完成相同的操作，但使用它可以使内容更加明确。 也就是说，这也有效：
$(element).css("opacity", 0.0).slideDown("slow", function() { $(this).animate({ "opacity": 1.0 }, "slow"); });
给这个镜头： http ： //jsfiddle.net/solidsource/67XZX/