如何使用jQuery实现以下幻灯片/切换效果？

Question

现在，在我的网站上，我有以下显示和隐藏

的JavaScript

<div class="commentBox"></div>

用户点击

时

<a href="#" class="storycoments" onclick="return false" onmousedown="javascript:toggleSlideBox">Show Comments</a>

完整代码：

<script type="text/javascript"> 
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>

<a href="#" class="storycoments" onclick="return false" onmousedown="javascript:toggleSlideBox">Show Comments</a>

<div class="commentBox">Content</div>

---

效果可以这样说明：

---

我想修改此功能以采取不同的行动，但我无法理解。基本上我想要的是显示一旦它开始扩展并且有效淡化的底部内容。

---

这就是我希望实现的目标：

---

有人可以建议如何实现图像2中显示的幻灯片/切换效果吗？因此，当用户点击链接时，它会像那样展开，当再次点击链接时，它会收缩。

Answer 1

你描述的效果看起来就像我JQuery UI slide effect（而不是你目前的盲目效果）。这不提供不透明度动画，但提供了一个非常简单的解决方案。或许我误解了你？

（该方法接受一个参数向下滑动，而不是从右到左）

$("#test").show("slide", {direction: "up"}, 1000);

JSFiddle here

Answer 2

如果您只是为背景图像设置动画，就像那只兔子一样，只需设置背景位置：

background-position: 0 100%;

这会将背景与底边而不是顶部对齐。

对于文本内容，同样的原则适用。您只需将内容绝对定位到底部边缘即可。例如：

<div class="container">
    <div class="content">
        <p>Text</p>
    </div>
</div>

然后使用这个CSS：

.container {
    position: relative;
    overflow: hidden;
}

.content {
    position: absolute;
    bottom: 0; left: 0;
}

唯一的问题是您需要找到内容的高度，以便了解扩展容器的数量。

为此，您可以使用此jQuery：

var height = $('.content').outerHeight();

然后在点击事件上，只为正确的高度设置动画：

$('.container').animate({
    'height': height
});

希望有所帮助：）