Question

I have a sliding section set up as below. I was wondering if I can somehow add easeIn and easeOut when the slide goes up and down.

$('a#slide-up').click(function () {
    $('.slide-container').slideUp(400, function(){
        $('#slide-toggle').removeClass('active');
    });
    return false;
});

$('a#slide-toggle').click(function(e) {
    e.preventDefault();

    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
        $('.slide-container').slideUp(400,function() {
            $(slideToggle).removeClass('active');
        });
    }
    else {
        $('.slide-container').slideDown(400);
        $(slideToggle).addClass('active');
    }
});

Answer 1

You can. Please check the documentation of slideDown at jQuery docs;.

By default jQUery implements only linear and swing easing functions. For additional easing functions you have to user jQUery UI

---

UPDATE:

Acoording to the doc, the second optional argument is a string indicating the name of the easing function.

So,

$('.slide-container').slideUp(400, function(){
        $('#slide-toggle').removeClass('active');
    });

will become

$('.slide-container').slideUp(400,'linear', function(){
        $('#slide-toggle').removeClass('active');
    });

to use linear easing function.

Similarly , for other easing functions also.