CODEWITHSUNDEEP
jquery
John
John

Reputation: 627

Can I add easing to this?

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');
    }
});

Upvotes: 3

Views: 1373

Answers (3)

robert
robert

Reputation: 8717

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.

Upvotes: 1

hennson
hennson

Reputation: 811

for slideUp and slideDown you ca add the easing effect:

$(".slide-container").slideUp({
    duration:500,
    easing:"easeOutExpo",
    complete:function(){
         $(slideToggle).removeClass("active");
    }
});

HTH

Upvotes: 1

Mark
Mark

Reputation: 632

You sure can, make sure you include the jQuery UI script as you do you regular jQuery library and add in the easing parameter to the slideUp() function.

Like so...

$('a#slide-up').click(function () {
    $('.slide-container').slideUp(400,'easeIn', 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,'easeOut',function() {
        $(slideToggle).removeClass('active');
    });
}
else {
    $('.slide-container').slideDown(400);
    $(slideToggle).addClass('active');
}

});

The same goes for the slideDown()

Theres a whole load of easing functions

Upvotes: 0

Related Questions