我试图动画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 });
});
}
});
});