Question

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! :-)

Answer 1

We can use the jQuery easing plugin to do this.

Include the jQuery easing Javascript file:

https://cdnjs.cloudflare.com/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