Menu
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.
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.
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?
I've investigated jQuery UI's .animate() function, but the documentation is unhelpful. My crude efforts to utilize it have been fraught with failure.
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
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.
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 });
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.
447
The slideDown() Method in jQuery is used to check the visibility of selected elements or to show the hidden elements. It works on two types of hidden elements: Elements hidden using jQuery methods. Elements hidden using display: none in CSS.
The slideUp() is an inbuilt method in jQuery which is used to hide the selected elements. Syntax: $(selector). slideUp(speed); Parameter: It accepts an optional parameter “speed” which specifies the speed of the duration of the effect.
The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.
The jQuery slideDown() method is used to slide down an element. Syntax: $(selector).slideDown(speed,callback);
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().
160
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.
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
You can try the example on the 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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
