Ben*_*yer 8 javascript jquery jquery-ui
我正在尝试利用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();
});
因为默认情况下它会在页面加载时加载.
我相信你正在寻找一种更像'盲目'的效果:
$('#drawer').show('blind');
奇怪的是$ .fn.slideDown()和$ .fn.show('slide')不是以相同的方式运行,而是'盲目'.'slide'创建一个占位符大小的对象,然后滑入视图框,而盲目调整元素的高度或宽度,直到它扩展到正确的大小(溢出设置为隐藏).实际上,效果名称是正确的,但由于遗留名称$ .fn.slideDown()而存在一些混淆.
这是一个迟到的帖子,但我遇到了这个问题,并设法使一些有用的东西.
我不是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>
是的，它就像手风琴的行为，只不过您也可以将其向上滑动。我已经使用此功能来创建我认为您正在寻找的内容。
$('#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(); });
});
希望这可以帮助。
都会