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

Nix · Accepted Answer · 2012-09-03 13:00:24Z

2

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

edited Sep 3, 2012 at 13:00

answered Sep 3, 2012 at 12:54

Nix

6,0684 gold badges34 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fruxelot Over a year ago

Thanks! ill try that out instead! is it still possible to add the easing functionality to the elements?

Asciiom · Accepted Answer · 2012-09-03 12:57:29Z

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.

edited Sep 3, 2012 at 12:57

answered Sep 3, 2012 at 12:49

Asciiom

9,9757 gold badges42 silver badges59 bronze badges

2 Comments

Fruxelot Over a year ago

It's only possible on the .animate function :(? And yeah , haha thats the whole point. i want the div to "bounce".

Asciiom Over a year ago

Why not use animate? What's the difference for you between calling css and animate? 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.

Collectives™ on Stack Overflow

How to add easing effect on jquery .css function?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related