【发布时间】：2013-04-03 04:57:45
【问题描述】：
我正在尝试为 div 的高度设置动画以隐藏或显示其中的内容。使用 animate() 是获取我想要的动画的最方便的方法，因为您可以指定一个高度来为其设置动画。但是，我试图获得使用 slideUp() 或 slideDown() 的功能。当使用 animate() 作为高度时，div id 内的内容会根据您是缩小还是扩大高度而向上或向下推...这不是我想要的。我希望 div 向上滑动并隐藏里面的内容或向下滑动并显示它（几乎就像车库门打开或关闭并显示或隐藏里面的内容一样，不会以任何方式影响它，就好像它有一个固定的位置一样） .有没有一种干净的方法可以做到这一点？我会继续使用 slideUp() 和 slideDown() 但我需要能够指定要增长到的高度和要停止的高度。任何帮助表示赞赏。
这是一个完整的工作示例： http://jsfiddle.net/8XRqg/
这是我尝试用 jQuery 做的一个版本。我完全按照它的功能需要它，只是我不希望内容受到 div 缩小的影响。此外，我现在在顶部和底部之间切换时内容淡出。一旦功能是我想要的，我想摆脱它。
$(document).ready(function()
{
var top = $("#top");
var bottom = $("#bottom");
var image = $(".image");
var content = $(".content");
var topOpen = false;
var bottomOpen = false;
content.hide();
top.click(function()
{
if(topOpen == false)
{
var thisContent = $(this).children(".content");
topOpen = true;
bottomOpen = false;
content.fadeOut(250);
thisContent.css({ marginTop : (thisContent.height()/2) * -1 });
image.fadeOut("fast", function()
{
thisContent.delay(500).fadeIn(250);
top.animate({ height : 190 });
bottom.animate({ height : 10 });
});
}
});
bottom.click(function()
{
if(bottomOpen == false)
{
var thisContent = $(this).children(".content");
bottomOpen = true;
topOpen = false;
content.fadeOut(250);
thisContent.css({ marginTop : (thisContent.height()/2) * -1 });
image.fadeOut("fast", function()
{
thisContent.delay(500).fadeIn(250);
bottom.animate({ height : 190 });
top.animate({ height : 10 });
});
}
});
});
【问题讨论】：
-
在这个小游戏中，你如何回到开始屏幕？
-
在 slideUp()/slideDown() 动画期间内容受到影响的程度（与您的情况类似）由应用于所包含元素的 CSS 决定，而不是由执行动画。
-
基本上，确保所包含的元素没有一个高度或位置取决于容器的高度。
标签： jquery jquery-animate slidedown slideup