Search code examples
jqueryeasingjquery-easing

How to add easing effect on jquery .css function?


How do you add the Jquery easing effects to your jquery script when using .CSS functions? For example in this other line i made it work, but i can't make it work with .CSS i am using the jquery easing library

$("#map").animate({height:300},1000, 'easeOutBounce');    

And how do i implement it on this .css script?

$('#comment-box').css('display','block');

Solution

  • .css is not animatable, that is what .animate is for. That said, I don't think display is animatable like that, since it merely toggles between the different display modes. You could use .show() and .hide() instead.

    Edit: Ah, it seems you want .slideDown().

    Try this:

    $('div#comment').slideDown(1000, 'easeOutBounce');
    

    It is also possible to use .slideUp() or .slideToggle().