How to add easing effect on jquery .css function?

Question

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

Answer 1

.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().

Answer 2

You can use it on the element opacity instead of the display attribute.

$("#map").css({opacity:0});
$("#map").animate({opacity:1}, 1000, 'easeOutBounce'); 

Though I doubt you will see much of the bounce effect.

Display is an 'on'/'off' type of attribute, no gradation of values is possible. You can get the effect by using opacity like I suggested to do the animation and set the display attribute after animation completion using a callback.