jQuery slideDown vs. jQuery UI .show('slide')

前端未结

关注

 5  1888

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

相关标签:

5条回答

死守一世寂寞

2021-02-03 13:39
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,
```
$('#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
0 讨论(0)
发布评论:

提交评论
- 加载中...
傲寒

2021-02-03 13:56

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/

See here for more info/code/etc: 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...

0 讨论(0)
发布评论:

提交评论
- 加载中...

孤独总比滥情好

2021-02-03 13:58

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>

0 讨论(0)

情话喂你

2021-02-03 14:00
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().
0 讨论(0)
发布评论:

提交评论
- 加载中...
天涯浪人

2021-02-03 14:01
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.

To see this in action, surround the element #drawer with another div:
```
<div id='container'>
    <div id='drawer'>...</div>
<div>
```
And animate the container:
```
$('#container')
    .css({ marginTop: $('#container').height() * -1 })
    .animate({ marginTop: 0 });
```
0 讨论(0)
发布评论:

提交评论
- 加载中...