2

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');
Fruxelot
  • 551
  • 2
  • 8
  • 23

2 Answers2

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.

Asciiom
  • 9,867
  • 7
  • 38
  • 57
  • It's only possible on the .animate function :(? And yeah , haha thats the whole point. i want the div to "bounce". – Fruxelot Sep 03 '12 at 12:53
  • 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. – Asciiom Sep 03 '12 at 12:57
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().

Nix
  • 5,746
  • 4
  • 30
  • 51
  • Thanks! ill try that out instead! is it still possible to add the easing functionality to the elements? – Fruxelot Sep 03 '12 at 12:55