jQuery下拉切换，可行吗？

Question

我想使用jQuery实现下滑效果，但是我无法在任何地方找到它。

我不希望它在滑动时缩放
我希望它执行此操作（点击滑动），但是垂直向下，而不是水平向右。

更新：

所以这是最终的功能代码！

$(this).toggle(
    "slide", 
    {
        direction: 'up',
        duration: 'slow',
        easing: 'easeOutQuart'
    }
);

- Kirk Strobeck

---

slideDown在滑动时不会缩放。我不明白你在问什么。 - Mark

你在开玩笑吗？？文档上的图形甚至显示了缩放效果。http://see.weareinto.com/3tTu - Kirk Strobeck

使用：.animate（{height：“toggle”}，300）; - Gregg B

@所有人 - 我真的想只使用jQuery UI滑动功能，但设置某些变量从上到下进行动画。我无法想象这个小问题不会以某种方式内置其中：\ - Kirk Strobeck

@Grillz 不，那与 slideDown 相同。 - Kirk Strobeck

我在使用的任何地方都无法扩展。 - Gregg B

Answer 1

阅读API文档：http://docs.jquery.com/UI/Effects/Slide

您可以使用方向选项在任何方向上滑动。

演示：http://www.jsfiddle.net/doktormolle/befbE/ （我将滑动元素内图像的宽度/高度设置为100％，因此您可以看到图像没有缩放，而是被裁剪了，我猜这就是您要找的）

- Dr.Molle

---

+1000！啊！正是我在寻找的，显然其他人也没有想到！ - Kirk Strobeck

为了让你们感到荒谬并把我的照片放在那里，我再加1000分，哈哈哈！ - Kirk Strobeck

我仍然认为如果它是一个切换链函数会很棒... 嗯 - Kirk Strobeck

Answer 2

如果您将元素绝对定位在容器中并将其附加到底部（即position:absolute;bottom:0;），则可以使用盲效果，它将从顶部向下滑动到底部。请参见此处。

- Richard Marskell - Drackir

---

这看起来非常接近！但是我该如何让它显示/隐藏，而且它可以像“.verticalSlideToggle()”一样简单吗？ - Kirk Strobeck

Answer 3

如果你想自己制作它，可以使用 .animate() 并使用 CSS。

类似于：

CSS：

#elm { width: 150px; height: 80px; position: absolute; left: -150px; }

脚本：

// let it animate
$('#elm').animate({ display: 'block', left: 0 }, 'fast');

如果您不想自己编写代码，可以使用jQuery UI的'slide'效果吗？

- Yoram de Langen

Answer 4

考虑您的高度为150像素的图像

首先应用height="0"

使用animate实现下滑效果

<img src="http://www.google.com/images/nav_logo29.png" id="image_scale" width="200" height="0" />

<script>
$(document).ready(function(){
    $("#image_scale").animate({height:"150px"},"5000");
});
</script>

- Wazy

---

这是按定义缩放：\ 我希望它向下滑动，而不是缩小，请参见问题 - 谢谢！ - Kirk Strobeck

Answer 5

我知道你的意思 - 在 DIV 或者你正在动画的任何东西内部的项目看起来像是被压扁了，然后才展开。

也许考虑将元素隐藏在另一个元素后面，然后移动遮罩元素并将其移出或使用 .animate() 将隐藏的元素向下滑动？

jQuery .click .animate 向下移动，然后向上移动

这可能会有所帮助。

- diagonalbatman

---

谢谢，但不够优雅 - 我很高兴你知道我的意思，但有时我不明白为什么其他人看不到它 :O - Kirk Strobeck

不，这并不完美，你可以考虑开发自己的方法以更好地完成这项任务。 - diagonalbatman

Answer 6

您可以通过一个具有固定尺寸的内部容器轻松实现此目标。

查看此实时示例。在这个fiddle中，第一个div没有内部容器。

这样，当外部容器进行动画（宽度/高度）时，内部容器不会增长，而是简单地显示出来。

- Josiah Ruddell

---

那看起来像是从角落里长出来的：\ - Kirk Strobeck

所有动画的理论都是相同的。我只是使用了一个可以控制宽度/高度/透明度的展示方式。 - Josiah Ruddell

抱歉，但这完全不是我的问题。 - Kirk Strobeck

Answer 7

将您想要滑入和滑出的元素绝对定位，并使用.animate()更改其位置。您可以使用此方法从顶部、底部、左侧、右侧、对角线或任何其他方式滑入。

- Carsen