I have a drop down menu which uses the slideUp feature in jQuery. I was wondering if I could remove the constant speed and start fast and end slow. I looked around and read about the easing method in animate, and I tried it, but it seems that it doesn't work for slideUp, only animate (if I am wrong please tell me); but otherwise, I cannot seem to figure it out. Any ideas? Here's my current code:

$(document).ready(function(){
    var h = "fast";

    $("[data-action='dropdown']").click(function(e) {
        e.stopPropagation();
    });

    $("body").click(function() {
        $("[data-action='dropdown'] ul ul").slideUp(h);
    });

    $("[data-action='dropdown'] ul li").click(function() {
        $("[data-action='dropdown'] ul ul").slideUp(h);

        $("ul", this).slideDown(h, function(){
            $("ul", this).slideUp(h);
        });
    });
});

The HTML is a very basic dropdown structure (just a ul element with lis and then inner uls nested inside. Then in css, I make it to where the inner ul ul is hidden with a display of none, then, of course, is toggled by jQuery).

Any help would be very much appreciated! :-)

I have a drop down menu which uses the slideUp feature in jQuery. I was wondering if I could remove the constant speed and start fast and end slow. I looked around and read about the easing method in animate, and I tried it, but it seems that it doesn't work for slideUp, only animate (if I am wrong please tell me); but otherwise, I cannot seem to figure it out. Any ideas? Here's my current code:

$(document).ready(function(){
    var h = "fast";

    $("[data-action='dropdown']").click(function(e) {
        e.stopPropagation();
    });

    $("body").click(function() {
        $("[data-action='dropdown'] ul ul").slideUp(h);
    });

    $("[data-action='dropdown'] ul li").click(function() {
        $("[data-action='dropdown'] ul ul").slideUp(h);

        $("ul", this).slideDown(h, function(){
            $("ul", this).slideUp(h);
        });
    });
});

The HTML is a very basic dropdown structure (just a ul element with lis and then inner uls nested inside. Then in css, I make it to where the inner ul ul is hidden with a display of none, then, of course, is toggled by jQuery).

Any help would be very much appreciated! :-)

• javascript
• jquery
• html
• css
• jquery-animate

• 3 The .slideUp() method accepts an easing parameter, though there are only two easing options available in the core library. Did you read the doco? – nnnnnn Commented Dec 8, 2012 at 2:09
• Yes, but it seems swing and linear isn't the type I'm looking for exactly... Is there any magical way I could transform or modify either swing or linear? – ModernDesigner Commented Dec 8, 2012 at 2:11
• 2 You can use jQuery UI or some other easing plugin to get more options. – nnnnnn Commented Dec 8, 2012 at 2:11
• Hmm, doesn't seem to work. I tried GSGD.co.uk's plugin but I looked in the error console and it says that the method I selected (easeOutBounce) is not defined, so I tried another, still undefined. – ModernDesigner Commented Dec 8, 2012 at 2:16
• Okay, I see this alot on websites, it can't really be that hard! XP – ModernDesigner Commented Dec 8, 2012 at 2:21

1 Answer 1

We can use the jQuery easing plugin to do this.

Include the jQuery easing Javascript file:

https://cdnjs.cloudflare./ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js

Then we can use the easing variables as a parameter in the slideUp function.

Javascript

jQuery('#Example').slideUp({
    duration: 1000,
    easing: 'easeOutCubic'
});

Demo