问题标签 [jquery-slide-effects]

这是我想要的效果吗？不幸的是，jQuery 的slideDown()效果并不相同。这是我追求的效果（代码和演示位于jsFiddle）。

我知道 jQuery 有一个animate()方法。slideIn()但是，要达到与 MooTool 的方法相同的效果，究竟应该涉及什么？

我正在尝试在将鼠标悬停在图像上时滑入和滑出的图像上创建叠加层。与此问题相同的原因 - JQuery Text slideDown / slideUp Overlay on Image Keeps Bouncing？.

我已将我的代码放在 jsFiddle 中，因此可以访问 - http://jsfiddle.net/jamescallaghan/hg9r7/

任何帮助将非常感激。

我正在尝试用动画滑动背景图像。如果我的第一个背景图像是我想要的。第二个将继续开始

这是我的代码

因为第一张图片工作正常，但它显示空白屏幕。在这个空白屏幕中，我想要第二个即将到来的屏幕

提前致谢

检查底部是否有修订版

好了，问题来了。我有li一个div内部，我试图将鼠标悬停li以div使其滑入视野。

这是HTML：

现在我的 CSS 中有这个：

这对于我的 JS：

我知道我可以使用 CSS psuedo:hover来让它弹出，但我想如果我想要一个幻灯片效果，那么我还不如在 JS 中完成。第一个问题是这不起作用：|。一旦我让它出现，我想给它添加一个幻灯片效果，我不确定这是否是正确的方法。

谢谢伙计们/姑娘们

修改

新的 JavaScript

这行得通！虽然它是从顶部下来的，我打算让它从底部出来。

我有一个工作正常的下拉菜单，但我想添加一些 jquery 效果，如动画、上滑、下移、

目前我使用可见性隐藏和可见来显示 ul，我怎样才能使用其他效果，下面是代码：

我尝试使用：$('ul', this).slideDown(100); $('ul', this).slideUp(100);没有成功css：

任何帮助将不胜感激

检查此代码：http: //jsfiddle.net/ZXN4S/1/

HTML：

jQuery：

如果您尝试在输入字段中插入一些文本并单击提交，您可以看到我正在谈论的问题。当它向下滑动时，幻灯片的高度是错误的，效果很丑。但是，如果您删除 divinfo效果很好。我该如何解决？

当鼠标悬停在图像上时，跨度内容在两秒钟后向下滑动，当我将光标移出图像时，两秒钟后跨度向上滑动，这很好。

如果有人也将鼠标移到该跨度上，我想显示该跨度，我的问题就开始了......

我不知道我是否足够清楚，但我认为代码会告诉你的不仅仅是文字:)

链接：http: //jsfiddle.net/zDd5T/3/

HTML：

CSS：

JavaScript：

提前致谢！

我正在尝试slideToggle()在包含文本的 DIV 上做一个简单的 jQuery，并且发现动画非常缓慢（似乎犹豫不决），因为slideDown动画接近滑动 DIV 的底部。

可以在此处找到代码和示例。我已经在多台计算机和流行浏览器的所有现代版本上进行了测试，它们的行为方式都相同。奇怪的是，当我在jsFiddle中运行完全相同的页面时，它很流畅。

有任何想法吗？

更新

部分原因似乎是，就像其他人建议的那样，jQuery 在动画运行之前不知道滑动 DIV 的高度。由于滑动 DIV 中的内容是动态的，要么很短，要么有点长，我也不会。所以，我尝试在使用 jQuery 隐藏它之前抓取 DIV 的高度，然后相应地设置 CSS 高度。制作更流畅的动画，但可能不是最佳解决方案 -演示

更新 2

问题似乎是由于初始示例中的几个 CSS 问题造成的。首先，DIV 太多。其次，滑动 DIV 设置了填充 - 不能很好地与 一起使用toggleSlide，最后，滑动 DIV 位于还包含#control-container（按钮）DIV 的容器 DIV 中。

将 DIV 减少到两个（滑动元素的外部 DIV 和滑动 DIV 本身）并且不设置外部滑动 DIV 填充似乎可以解决问题 -最后一个示例。

好的，我有一个固定的导航侧栏，我有三个图标。单击图标时，div（以负边距隐藏）将滑出。当再次单击按钮时，显示的 div 将隐藏（通过幻灯片动画）。将对其他两个图标重复此操作。

我意识到有很多不同的方法可以执行此操作，并且有很多支持文档有不同的意见。我曾尝试通过 .click 和 .animate({"left": "+=56px"},"slow") 声明该操作，并且我还编写了触发 onclick 的函数。我意识到我可以轻松地让这个简单的任务变得比它需要的复杂得多。

关于执行此操作的最干净方法的任何建议？

编辑：感谢大家的意见。切换，虽然它本质上是极简主义的，但它不会从左到右。我最终使用的脚本是：

我正在尝试创建一个简单的消息，该消息滑入并在滑入时“优雅地”将其下方的内容向下滑动。我遇到的问题是消息下方的内容没有优雅地滑动，而是“跳跃”在动画开始之前到消息的完整高度。当消息被隐藏时也是如此 - 消息向上滑动，但高度保持不变，直到动画完成，然后内容弹回原位。

超级简化的 JSFiddle：http: //jsfiddle.net/U94qD/2/

代码（以防 JSFiddle 宕机）：

HTML：

JS：

注意：我尝试使用“slideDown”和“slideUp”方法，但动画的功能不同。不是向下滑动内容，而是调整 div 的高度以显示内容，这就是我所说的“盲”动画，而不是“幻灯片”