jQuery Effect animate() Method

jQuery Effect animate() Method

jQuery Effect Methods jQuery Effect Methods

Example

“Animate” a div element, by changing its height:

$(“#btn1”).click(function(){
$(“#box”).animate({height:”300px”});
});

Try it yourself »


Definition and Usage

The animate() method performs a custom animation of a set of CSS properties.

This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.

Only numeric values can be animated (like “margin:30px”). String values cannot be animated (like “background-color:red”).

Note: Use “+=” or “-=” for relative animations.


Syntax

(selector).animate({styles},speed,easing,callback)

 

Parameter Description
styles Required. Specifies one or more CSS properties to animate, and the values to animate to.Note: The styles are set with DOM names (like “fontSize”), not CSS names (like “font-size”).

The possible CSS style values are:

speed Optional. Specifies the speed of the animation. Default is “normal”Possible values:

  • milliseconds (like 1500)
  • “slow”
  • “normal”
  • “fast”
easing Optional. Specifies an easing function that sets the speed in different points of the animation.Built-in easing functions are:

  • swing
  • linear

More easing functions are available in external plugins.

callback Optional. A function to be executed after the animation completes.To learn more about callback, visit our jQuery Callback chapter.

 


Alternate Syntax

(selector).animate({styles},{options})

 

Parameter Description
styles Required. Specifies one or more CSS properties to animate, and the values to animate to (See possible values above)
options Optional. Specifies additional options for the animation.Possible values:

  • speed – set the speed of the animation
  • easing – specify the easing function to use
  • callback – specifies a function to be executed after the animation completes
  • step – specifies a function to be executed after each step in the animation
  • queue – a Boolean value specifying whether or not to place the animation in the effects cue
  • specialEasing – a map of one or more CSS properties from the styles parameter, and their corresponding easing functions

 


jQuery Effect Methods jQuery Effect Methods

17 comments on “jQuery Effect animate() Method

  1. Hello just thought i would tell you something.. This is twice now i’ve landed on your blog in the last 2 weeks hunting for completely unrelated things. Spooky or what?

  2. Thanks for the sensible critique. Me & my neighbor were just preparing to do some research about this. We got a grab a book from our area library but I think I learned more clear from this post. I’m very glad to see such magnificent info being shared freely out there.

  3. I do trust all of the ideas you’ve presented in your post. They’re very convincing and will definitely work. Nonetheless, the posts are too quick for beginners. May just you please extend them a bit from next time? Thank you for the post.

  4. Many thanks for posting this, It?s simply what I used to be researching for on bing. I?d rather a lot comparatively hear opinions from an individual, barely than a company web page, that?s why I like blogs so significantly. Many thanks!

  5. Great post. I used to be checking continuously this weblog and I’m inspired! Very helpful info specifically the last section 🙂 I maintain such info a lot. I was seeking this certain info for a very long time. Thanks and best of luck.

  6. Thank you a bunch for sharing this with all people you really recognize what you are speaking about! Bookmarked. Please also discuss with my website =). We could have a hyperlink trade arrangement among us!

  7. Pretty section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Any way I will be subscribing to your feeds and even I achievement you access consistently fast.

  8. I do agree with all the ideas you have presented in your post. They’re really convincing and will certainly work. Still, the posts are very short for beginners. Could you please extend them a bit from next time? Thanks for the post.

  9. Hi, I just ran across your web site via google. Your article is truly applicable to my life right now, and I’m really delighted I found your website.

  10. Perfectly written content material, thank you for entropy. “In the fight between you and the world, back the world.” by Frank Zappa.

  11. Toda esta serie de nuevos terminales son sencillamente hermosos, desde la ltima actualizacin general a su sistema operativo iOS. Estamos Interesados en comprar tecnologia x lam de Segunda Mano. Accesorios de la responsabilidad que exige el uso social de Tecnologia X Lam genera ventajas y al mismo tiempo desventajas. 2 GH z, una versin del mando, con una aplicacin. Aqui todas las bondades del nuevo smartphone estar dotado de una gran emocionante aventura de misiones y actividades divertidas. Este curioso dispositivo que lleva el terminal, y con la tecnologa Ultrapxelque logra imgenes de gran calidad, aunque su precio final. Una sensacin comn de los compaeros, de 5. Hoy en da contamos con: video llamadas, mensajes instantneos de voz que se sita en la salud. home security cameras systems http://www.nexopia.com/users/wallacehiph/blog/12-mellons-automatic-video

  12. hey there and thank you for your information – I’ve definitely picked up something new from right here.
    I did however expertise some technical issues using this web site, since I experienced to reload the website lots of times previous to I could get it to load properly.
    I had been wondering if your hosting is OK? Not that I am
    complaining, but slow loading instances times will often affect your placement in google and
    can damage your high quality score if ads and marketing with Adwords.
    Anyway I’m adding this RSS to my email and could look
    out for a lot more of your respective intriguing content.
    Ensure that you update this again soon.

  13. You are my intake , I own few web logs and very sporadically run out from to post .I believe this internet site has got some very good info for everyone. “The foundation of every state is the education of its youth.” by Diogenes.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s