如何用jQuery实现下面的滑动/切换效果？答案

【问题标题】：How to achieve the following slide / toggle effect with jQuery?如何用jQuery实现下面的滑动/切换效果？
【发布时间】：2011-12-21 01:54:32
【问题描述】：

现在在我的网站上，我有以下显示和隐藏的 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 中显示的滑动/切换效果？因此，当用户单击链接时，它会像这样展开，而当再次单击链接时，它会缩小。

【问题讨论】：

也许这有帮助：[如何同时执行多个 jquery 效果？][1] [1]：stackoverflow.com/questions/2344804/…
不是真的，不是一次有几个效果，我的问题更多的是如何得到它，所以当它向下滑动时，它首先显示底部的内容，看看原始功能如何首先显示兔子耳朵，而我想要实现的一个首先显示兔子尾巴）））
哦，对不起。你可以把你的兔子放在一个额外的 div 中，溢出：隐藏，高度为 0px。现在你可以使用底部：0px;在你的兔子身上并向下滑动“额外的 div”。然后第一件事，你会看到兔子的脚。 - 另一种方式：使用负值的 margin-top 并将其动画化为正值。
我明白你对边距的意思））但是如果再次点击链接，我怎么能隐藏潜水？我会将其设置回负边距吗？事情是 java 脚本是我的一周，你能提供一个示例代码或类似的东西吗？

标签： toggle slide jquery

【解决方案1】：

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

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

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

JSFiddle here

【讨论】：

是的，您提供的链接与我的第一个示例具有相同的效果。看看第一个示例如何首先显示兔子耳朵，这与您提供的效果完全相同（我现在正在使用它）。但是在我的第二个示例中，您可以看到它首先显示兔子底部。你明白我的意思吗？
默认效果为“盲”，即先显示耳朵。如果您将其更改为“滑动”，您首先会得到兔子底部。您可以通过在下拉列表中选择“幻灯片”在演示页面上看到这一点。
例子是从左到右滑动，如何改成从上到下滑动？
是的，正是我想要的，我怎样才能让它在点击链接时启动？如果再次单击链接，它会向后滑动吗？谢谢）））
我已经让它在点击时工作，我怎样才能让它在再次点击链接时滑回？ $('#clickme').click(function() { $("#test").show("slide", {direction: "up"}, 1000); });

【解决方案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
});

希望有帮助:)

【讨论】：

如您所说，这仅适用于具有背景图像的元素。由于他的 div 类被称为“commentBox”，我相信兔子只是一个例子。但是还是不错的提示！
我认为可能是这种情况，所以如果您继续阅读，我会解释如何处理内容。