Javascript jQuery slideDown 与 jQuery UI .show('slide')

Question

提问by Ben Dyer

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.

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

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').slideDown()，内容会被推开，但内容实际上并没有“下滑”。揭示内容更像是擦拭。

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.

如果我使用$('#drawer').show('slide',{direction:'up'})，内容会正确地向下滑动，但元素下方的所有内容都会在效果发生之前跳开。

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?

有没有办法结合这两者的优点来复制我正在寻找的效果：一个滑出的抽屉，把它下面的内容推开？

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 UI 的.animate()功能，但文档没有帮助。我使用它的粗略努力充满了失败。

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

而且，如果有人问，对不起，我不能展示一个例子，但我们希望它像 jQuery Drawer 插件一样运行：

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

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.

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

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

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

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

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

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

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

Because by default it will load when the page loads.

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

Answer 1

回答by Andy Edinborough

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

我相信您正在寻找更像“盲”的效果：

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

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().

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

Answer 2

回答by grifos

It is a late post, but I encountered this problem and managed to make something that works.

这是一篇迟到的帖子，但我遇到了这个问题并设法做出了一些有效的东西。

I'm not a jQuery or Javascript Guru so don't be harsh with this quick solution.

我不是 jQuery 或 Javascript 大师，所以不要对这个快速解决方案苛刻。

Here is a little example. The order of the effects must respected. You can play with the animation time length to have a really nice drawing effect.

这是一个小例子。必须遵守效果的顺序。您可以使用动画时间长度来获得非常好的绘图效果。

I just quickly tested it on FF 3.6

我只是在 FF 3.6 上快速测试了它

You can try the example on the google code playground. http://code.google.com/apis/ajax/playground/#jqueryui

您可以在 google code playground 上尝试该示例。 http://code.google.com/apis/ajax/playground/#jqueryui

Click on edit html, paste the code and click run code. The example should be working

单击编辑 html，粘贴代码并单击运行代码。该示例应该有效

Hope it'll help

希望它会有所帮助

<html>
<head>
<!--<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.6.min.js"></script>-->
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1");
    google.load("jqueryui", "1");
    </script>
</head>
<body>
<script>
jQuery(function ()
{
    // We bind the <a>I'm the push link!</a> click event to the toggle function
    $("#topPart a").click(function() 
                                      {
                                          toggleSlide(this);
                                      });                
});
function toggleSlide(element)
{
    var drawer = jQuery("#drawer");
    var content = jQuery("#drawerContent");
    if (jQuery(content).is(":hidden"))
    {
        // The order here is important, we must slide juste before starting blinding
        setTimeout(function()
                    {
                        jQuery(content).effect("slide", { direction: "up", mode : "show"}, 500);
                    },1);
        setTimeout(function()
                    {
                        jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 490);

                    },1);
    }
    else
    {
        setTimeout(function()
                    {
                        jQuery(drawer).effect("blind", { direction: "vertical", mode : "hide" }, 500);
                        // The previous blind effect hide the drawer
                        // However we want it to be shown again, if not the next "drawer opening effect" won't play
                        jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 1);
                    },1);
        setTimeout(function()
                    {
                        jQuery(content).effect("slide", { direction: "up", mode : "hide" }, 460);
                    },1);
    }
}

</script>

    <div id="topPart">
        <a href="javascript:void(0)">I'm the push link!</a>
    </div>
    <div id="drawer">
        <div id="drawerContent" style="display:none;border:1px solid transparent;width:600px;">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....
        </p>
        <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        </div>
    </div>
    <div id="bottomPart">
    I want to be pushed nicely
    </div>
</body>
</html>

Answer 3

回答by Jeff Sternal

The javascript you have in your question update works, but it needs to operate on an element containing your content rather than the content itself.

您在问题更新中使用的 javascript 有效，但它需要对包含您的内容的元素而不是内容本身进行操作。

To see this in action, surround the element #drawerwith another div:

要查看此操作，请#drawer用另一个将元素包围div：

<div id='container'>
    <div id='drawer'>...</div>
<div>

And animate the container:

并为容器设置动画：

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

Answer 4

回答by MarcusTucker

I've been looking for a decent implementation of this (seemingly simple) effect too, and this is the best one I've found: http://eric.muyser.com/work/jquery/drawer/example/

我也一直在寻找这种（看似简单）效果的体面实现，这是我发现的最好的实现：http: //eric.muyser.com/work/jquery/drawer/example/

See here for more info/code/etc: http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

有关更多信息/代码/等，请参见此处：http: //eric.muyser.com/blog/post/jquery-plugin-jdrawer

However, it still seems overkill and needs to be boiled down into a bare essence animation plugin that can be called/applied via .show(), which is precisely what you'd expect to be already present in jQuery/UI as standard in the first place... but sadly isn't...

但是，它似乎仍然有些矫枉过正，需要将其归结为一个可以通过 .show() 调用/应用的基本动画插件，这正是您期望在 jQuery/UI 中作为标准出现在第一名......但遗憾的是不是......

Answer 5

回答by Metropolis

Yes it is like the accordion behavior except that you can also slide it up. I have used this functionality to create what I think you are looking for.

是的，它就像手风琴的行为，只是你也可以把它向上滑动。我已经使用此功能来创建我认为您正在寻找的内容。

$('#drawer').slideDown('slow');

By changing the speed you can get different slide speeds to look the way you want it. Now, even though you have the drawer element, you need a container that is initially hidden which is what will slide. Lets say you have a button with an id of "drawer", and a container with an id of "myDrawerContent." You would do the following,

通过更改速度，您可以获得不同的幻灯片速度，以达到您想要的效果。现在，即使你有抽屉元素，你也需要一个最初隐藏的容器，它会滑动。假设您有一个 ID 为“drawer”的按钮和一个 ID 为“myDrawerContent”的容器。你会做以下事情，

$('#drawer').click(function() {
    $('#myDrawerContent').slideDown('slow');
}

$('#drw_loader').animate({ 
    height: $('#drw_ajax').height() }, 
    function () { $('#drw_loader').fadeOut(function () { $('#drw_ajax').fadeIn(); });
});

Hope this helps.

希望这可以帮助。

Metropolis

都会

Javascript jQuery slideDown 与 jQuery UI .show('slide')

提问by Ben Dyer

回答by Andy Edinborough

回答by grifos

回答by Jeff Sternal

回答by MarcusTucker

回答by Metropolis

相关推荐

最近更新

标签

Javascript jQuery slideDown 与 jQuery UI .show('slide')

提问by Ben Dyer

回答by Andy Edinborough

回答by grifos

回答by Jeff Sternal

回答by MarcusTucker

回答by Metropolis

相关推荐

Javascript 根据另一个填充 1 个表单字段

如何让 JavaScript 制作（生成）新页面？

Javascript 带有锚元素的jQuery mailto

Javascript 从 Excel 复制/粘贴到网页

相关推荐

最近更新

标签