jQuery slideDown与jQuery UI .show（'slide'） [英] jQuery slideDown vs. jQuery UI .show('slide')

问题描述

我正在尝试利用jQuery的内置效果功能来创建一个从导航栏后面滑出的抽屉，将其下面的内容推开。

I'm trying to utilize jQuery's built in effect functionality to create a "drawer" that slides out from behind a navigation bar, pushing the content below it out of the way.

如果我使用 $（'＃drawer'）。slideDown（），内容会被推开，但内容实际上并没有向下滑动 。更多的是擦除内容。

If I use $('#drawer').slideDown(), the content is pushed out of the way, but the content does not actually "slide down." It's more of a wipe to reveal the content.

如果我使用 $（'＃drawer'）。show（'slide'，{direction ：'up'}），内容正确地向下滑动，但元素下面的所有内容都会在效果发生之前跳出来。

If I use $('#drawer').show('slide',{direction:'up'}), the content correctly slides down, but all of the content below the element jumps out of the way before the effect occurs.

有没有办法结合这两者中的最佳效果来复制我正在寻找的效果：抽出一个抽屉，将其下面的内容推开？

Is there a way to combine the best of both of these to replicate the effect I'm looking for: a drawer that slides out, pushing the content below it out of the way?

我调查了jQuery UI的 .animate（）函数，但文档没有用。我粗暴地利用它已经充满了失败。

I've investigated jQuery UI's .animate() function, but the documentation is unhelpful. My crude efforts to utilize it have been fraught with failure.

并且，如果有人问，抱歉，我不能展示一个例子，但我们希望它函数类似于jQuery Drawer插件：

And, in case anyone asks, sorry, I can't show an example, but we would like it to function like the jQuery Drawer plugin:

http ：//lib.metatype.jp/jquery_drawer/sample.html

但该插件并不能满足我们的需要，否则我会只使用它（不使用项目符号列表或AJAX内容）。然而，那就是我们想要的效果。

But that plugin doesn't do quite what we need either, otherwise I'd just use that (not using a bulleted list or AJAX content). The effect there is what we want, however.

更新：我也通过jQuery Drawer插件尝试了这部分代码，但它根本没有动画：

UPDATE: I have also tried this part of the code via the jQuery Drawer plugin, but it doesn't animate at all:

$('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 });

为了澄清，这也是在一个函数中调用的 OpenDrawer（）这样调用：

To clarify, too, this is called within a function OpenDrawer() that is called thusly:

$(document).ready(function() {
    OpenDrawer();
});

因为默认情况下会在页面加载时加载。

Because by default it will load when the page loads.

推荐答案

我相信你正在寻找更像'盲目'的效果：

I believe you're looking for an effect more like 'blind':

$('#drawer').show('blind');

奇怪的是$ .fn.slideDown（）和$ .fn.show（'slide'）不要以同样的方式运作，而是盲目。 'slide'创建一个占位符大小的对象，然后滑入视图框，而盲目调整元素的高度或宽度，直到它扩展到正确的大小（溢出设置为隐藏）。实际上，效果名称是正确的，但由于遗留名称$ .fn.slideDown（）而存在一些混淆。

It's odd that $.fn.slideDown() and $.fn.show('slide') don't operate the same way, but rather 'blind' does. 'slide' creates a placeholder the size of your object and then slides into the frame of view, while blind adjusts the height or width of your element until it expands to the correct size (while overflow is set to hidden). So actually, the effect names are correct, but there's some confusion because of the legacy name $.fn.slideDown().

这篇关于jQuery slideDown与jQuery UI .show（'slide'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！