jQuery 如何向下滑动 div 然后 .fadeIn() 内容，反之亦然？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4936137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to slide down a div then .fadeIn() the content and vice versa?
提问by Classer
Goal
目标
When a user clicks the button, the div in question will:
当用户单击按钮时，有问题的 div 将：
- slide down
- stop
- fade in the content
- 滑下
- 停止
- 淡入内容
When the user clicks the button again, the div will:
当用户再次单击按钮时，div 将：
- fade out
- stop
- slide up
- 淡出
- 停止
- 向上滑动
Current position
当前位置
Here is an example where the fadeInand fadeOutis happening at the right time but there is no slideeffect before and after the fadeIn and fadeOut respectively
http://jsfiddle.net/tkRGU/1/
这是一个示例，其中淡入和淡出在正确的时间发生，但在淡入和淡出之前和之后没有滑动效果
http://jsfiddle.net/tkRGU/1/
Also there is this option which has the slideTogglefunction but does not have the fadeInand fadeOutoccuring after and before the slide respectively.
http://jsfiddle.net/MY8DD/7/
还有这个选项，它具有slideToggle功能，但没有分别在幻灯片之后和之前发生淡入和淡出。
http://jsfiddle.net/MY8DD/7/
回答by Solid Source
This will work:
这将起作用：
HTML:
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:
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
);
});
}
}
For IE just make sure there is a background color behind the content for cleartype.
对于 IE，只需确保 cleartype 的内容后面有背景颜色。
回答by jacobangel
It sounds like since you want the two operations to occur simultaneously that you should use the animate function. Otherwise the actions will come one after another.
听起来您希望这两个操作同时发生，因此您应该使用animate 函数。否则，行动将接踵而至。
If you know the height of the element before running it, then you can set things fairly easily. Here's an extremely rough example: http://jsfiddle.net/tArQu/
如果您在运行之前知道元素的高度，那么您可以相当轻松地进行设置。这是一个非常粗略的例子：http: //jsfiddle.net/tArQu/
回答by benhowdle89
$("#button").toggle(function(){
$("#content").slideDown().fadeIn();
}, function(){
$("#content").slideUp().fadeOut();
return false;
});
That what you're after?
那是你追求的？
回答by Ben
If you don't know the height of the element in advance, it is slightly more complicated. You have to animate the opacity directly to fade, and you must hide the content with CSS visibility while it is "sliding".
如果事先不知道元素的高度，那就稍微复杂一点。您必须直接为不透明度设置动画以使其淡出，并且必须在“滑动”时隐藏具有 CSS 可见性的内容。
CSS visibility "hidden" allows content to occupy the space in the document it normally would, but to be hidden from view; CSS display "none" doesn't just hide the element, it removes it from the document flow. By hiding the element using visibility, we can slide it down until it is its full height, while the content of the element remains invisible.
CSS 可见性“隐藏”允许内容占据文档中通常会占用的空间，但被隐藏起来；CSS 显示“无”不仅隐藏元素，还将其从文档流中删除。通过使用可见性隐藏元素，我们可以将其向下滑动直到达到其全高，而元素的内容保持不可见。
Similarly, fading content in using jQuery's fadeIn function assumes an element is initially hidden with display "none", so it won't work if we use visibility. Instead, we make the element initially fully transparent (opacity 0.0); once the sliding animation is complete, we set visibility to "visible" and then animate the opacity from fully transparent to fully opaque (0.0 to 1.0).
类似地，使用 jQuery 的fadeIn 函数淡化内容假设一个元素最初是隐藏的，显示为“none”，因此如果我们使用可见性，它将不起作用。相反，我们使元素最初完全透明（不透明度 0.0）；滑动动画完成后，我们将可见性设置为“可见”，然后将不透明度从完全透明设置为完全不透明（0.0 到 1.0）。
Assuming the element is initially hidden (CSS display "none" or jQuery hide function):
假设元素最初是隐藏的（CSS 显示“无”或 jQuery 隐藏功能）：
$(element).css("visibility", "hidden").slideDown("slow", function() {
$(this).css("opacity", 0.0).css("visibility", "visible").animate({
"opacity": 1.0
}, "slow");
});
N.B.: Be extra careful typing "visibility" and "visible" as they are easily misspelled -- the source of many frustrating bugs.
注意：输入“visibility”和“visible”时要格外小心，因为它们很容易拼错——这是许多令人沮丧的错误的根源。
You don't HAVE to use visibility, as you can accomplish the same thing by making the content initially transparent, but using it makes it more explicit what is going on. That is, this also works:
您不必使用可见性，因为您可以通过使内容最初透明来完成同样的事情，但使用它可以使正在发生的事情更加明确。也就是说，这也有效：
$(element).css("opacity", 0.0).slideDown("slow", function() {
$(this).animate({
"opacity": 1.0
}, "slow");
});
回答by Solid Source
Give this a shot: http://jsfiddle.net/solidsource/67XZX/
