CODEWITHSUNDEEP
jquery
Hitz
Hitz

Reputation: 1071

Fade DIV with cool animation

I am fading a DIV slowly, 

$(ele).fadeIn('slow');

How can i create a very good animation along with the fadeIn to show real animation power of jquery

Upvotes: 1

Views: 1679

Answers (3)

Laurence
Laurence

Reputation: 409

You can execute multiple animations in jquery really easily:

/*you can hide your item with the css property first*/

<style>
 #id_of_what_want_to_animate{display:none;height:1px;}
</style>

then reveal it with jquery 

//target the item that triggers the animation
$('#clickthis').click(function() {
   //when clicked animate whatever you want, the 5000 is the duration of the animation in
   //milliseconds inside the curly braces you can animate css properties   
  $('#id_of_what_want_to_animate').animate({opacity: 1,height: '200px'},5000,function() {
    //run something else when your animation complete.
  });
});

you can refer to jquery's detailed documentation at:

http://api.jquery.com/animate/

Upvotes: 0

Fermin
Fermin

Reputation: 36081

You could also check out JQuery UI as this allows you to animate colours too or read this article about plugins for unforgetable user experiences.

Upvotes: 3

Russ Cam
Russ Cam

Reputation: 125488

What kind of animation are you looking for? You could slideDown(), slideUp() or use animate() and define your own

Upvotes: 2

Related Questions