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

我试图利用jQuery的内置效果功能来创建一个从导航栏后面滑出的“抽屉”，将它下面的内容推出办法。jQuery slideDown与jQuery UI .show（'slide'）

如果我使用$('#drawer').slideDown()，内容将被排除，但内容实际上不会“滑下”。这更多的是揭示内容。

如果我使用$('#drawer').show('slide',{direction:'up'})，内容正确地滑落，但元素下面的所有内容都会跳出来，然后才会出现效果。

有没有一种方法可以将这两种方法中最好的方法结合起来，以便复制我正在寻找的效果：滑出的抽屉，将内容推下去的方式？

我已经调查过jQuery UI的.animate()函数，但文档没有帮助。我使用它的原始努力充满了失败。

而且，万一有人问，对不起，我不能显示的例子，但我们希望它像抽屉的jQuery插件功能：

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

但是，插件不完全是我们需要的，否则我只会使用它（不使用项目符号列表或AJAX内容）。但是，那里的效果就是我们想要的。

更新：我也尝试过通过的jQuery插件抽屉的这部分代码，但它并没有在所有的动画：

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

为了澄清，太，这是一个功能OpenDrawer()内称那因此被称为：

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

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

来源

2010-01-06 Ben Dyer

是的，它就像手风琴的行为，除了你也可以滑动它。我已经使用这个功能来创建我认为你正在寻找的东西。

$('#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(); }); 
});

希望这有助于。

都市报

来源

2010-01-06 19:24:36 Metropolis

好吧，这也不是我的问题。 slideDown（）工作正常，但它实际上不是“滑动”。这更多的是“擦拭”效果。这对于很多目的来说都很好，但是我希望内容似乎滑落下来，而不是“显露”。 – 2010-01-06 19:58:17

您显示的链接（http://lib.metatype.jp/jquery_drawer/sample.html）正在使用动画。我会在上面发表。 – Metropolis 2010-01-06 20:30:55

更接近，但我认为这是jQuery Drawer代码的错误部分。这是为了在AJAX内容加载后关闭加载器。我尝试在代码中更早地借用一行（请参阅更改的问题），但这根本不起作用。我觉得我走在正确的轨道上，但这还没有真正接近工作。 – 2010-01-06 21:08:28

你在你的问题的更新有JavaScript的工作，但它需要包含的内容，而不是内容本身的元素上进行操作。

要看到这个动作，环绕元素#drawer另一个div：

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

和动画容器：

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

来源

2010-01-06 22:08:08

+1简单而有效 – vikmalhotra 2011-11-26 01:38:33

我相信你正在寻找一个效果更像是“盲'：

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

奇怪的是$ .fn.slideDown（）和$ .fn.show（'幻灯片'）不以相同的方式操作，而是'盲'。 'slide'会创建一个与对象大小相同的占位符，然后滑入视图框中，而盲调整元素的高度或宽度，直到其展开为正确的大小（而溢出设置为隐藏）。所以实际上，效果名称是正确的，但由于传统名称$ .fn.slideDown（）有一些混淆。

来源

2010-05-17 20:49:26

我一直在寻找这个AGES！非常感谢。 – Ashitaka 2012-04-05 20:53:31

这是一个后期的帖子，但我遇到了这个问题，并设法使一些有用的东西。

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

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

我只是很快测试了FF 3.6

您可以尝试在谷歌代码操场的例子。 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>

来源

2010-11-23 05:17:32 grifos

感谢您的回答。一直在为AGES寻找类似的东西（真正的滑下效果）。 – katebp 2011-05-24 11:13:56

@katebp，我真的同意你的看法，赞同'grifos'。 – NullPointer 2014-07-17 06:50:41

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

在这里看到更多的信息/代码的/ etc： http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

但是，它仍然显得矫枉过正，需要归结成裸精华动画插件，可以调用/应用通过.show（），这正是你期望已经在jQuery /用户界面作为标准在第一位存在...但遗憾的是不是...

来源

2011-11-17 14:50:03 MarcusTucker

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

回答

相关问题