Question

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

如果我使用$('#drawer').slideDown()，内容会被推开，但内容实际上并没有“向下滑动”。揭示内容更像是一种擦拭。

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

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

我已经研究过jQuery UI的.animate()函数，但文档没有用。我粗暴地利用它的努力充满了失败。

并且，如果有人问，抱歉，我无法展示示例，但我们希望它的功能类似于jQuery Drawer插件：

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

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

这是一个迟到的帖子，但我遇到了这个问题，并设法制作了有用的东西。

我不是jQuery或Javascript Guru所以不要对这个快速解决方案感到苛刻。

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

我刚刚在FF 3.6上快速测试了它

您可以在Google代码游乐场上试用该示例。 http://code.google.com/apis/ajax/playground/#jqueryui

点击编辑html，粘贴代码并点击运行代码。该示例应该正常工作

希望它会有所帮助

<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

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

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

包围在一起

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

为容器设置动画：

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

Answer 4

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

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

通过更改速度，您可以获得不同的滑动速度，以便按照您想要的方式显示。现在，即使你有抽屉元素，你需要一个最初隐藏的容器，它将被滑动。假设您有一个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(); });
});

希望这有帮助。

大都市

Answer 5

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

请点击此处了解更多信息/代码/ etc： http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

然而，它仍然看起来有点过分，需要归结为一个可以通过.show（）调用/应用的裸本动画插件，这正是你期望在jQuery / UI中已经存在的首先是标准......但遗憾的是......

jQuery slideDown与jQuery UI .show（'slide'）

5 个答案: