jQuery .animate() Method - Part 1


Introduction

Download

In short, jQuery .animate Method used to perform a custom animation of a set of CSS properties. .animate() Method comes in two flavor. First takes four arguments and second takes two arguments.


First Flavor

.animate( properties [, duration] [, easing] [, complete] )

Properties and values: A map of CSS properties that the animation will move toward.

Duration or Speed: A string or number determining how long the animation will run.

Easing: A string indicating which easing function to use for the transition.

Complete: A function to call once the animation is complete.

Second Flavor

.animate( properties, options )

Properties and values: A map of CSS properties that the animation will move toward.

Options: A map of additional options to pass to the method.

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

Setup Demonstration Page for First Flavor

Let's setup the demonstration page for first flavor, find the code below.


As in above image, when I click on page (anywhere on HTML area), the entire jQuery method will get execute. I have attached animation to bee named (id) image and animate method has five properties. First one is opacity to toggle, means when I click, opacity will range (run) from 0 to 100 (here 0 means no opacity and 100 means full opacity, image will get hide) and all within limited time that is 2000 milliseconds. Second one is left, means at each click, image will be pushed from left side to 50px. Third one is top, this is also same as last one, at each click image will be pushed from top to 50px. Four and fifth are height and width, both has toggle property. Means on first click, height and width property will run from original size (that is 200) to 0 (means image will be invisible) and on second click, again height and width property will run from 0 (invisible) to original size (that is 200). At the end of each click, a method will get fire and it will alert by message "Animation Finished".

Look at the animated screen.


Setup Demonstration Page for Second Flavor

Let's setup the demonstration page for first flavor, find the code below.


As in above image, when I click on right id button, the jQuery method attached with this will get execute. And in this execution, I have attached an animation with a image whose id is "bee", on each click image will be pushed from left to 50px at slow speed. Just opposite execution will take place when we clck on left id button.

Look at the animated screen.


Note: Don't forget to set object's (that will animate) style 'position:relative'.
Download the Source Code to test it yourself. I hope you like it.

Comments

Post a Comment

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Image
As you know ASP.NET Core Identity (table structure) is different from what we had earlier in ASP.NET Identity. Actually the identity system which we have today with .NET Core is very mature and continuously evolved be it ASP.NET Membership, ASP.NET Identity 1, ASP.NET Identity 2 and now ASP.NET Core Identity. Recently I had to migrate few application to ASP.NET Core and similar its identity database. Because the table schema is changed, i had to re-think and create migration script which I would like to share with you today. It is very simple and easy, just three step and I had everything ready: STEP 1 : Change name of existing tables STEP 2 : Create ASP.NET Core Identity tables STEP 3 : Migrate data from old tables (ASP.NET Identity) to new tables (ASP.NET Core Identity) Script:  https://gist.github.com/itorian/c699e8534b392a6c726ec66c48100072 You should also watch my video, where I demoed migration.
Read More »

Customize User's Profile in ASP.NET Identity System

Image
Note: You should read this post instead, I found below walkthrough will not work on ASP.NET Identity 2. I will re-work on this post soon. In this post you will learn how to customize User’s Profile and add some more fields like FirstName, LastName, EmailID etc with ASP.NET Identity System. In my last post I listed some of the great new features introduced with Identity system .
Read More »

Lambda two tables and three tables inner join code samples

In this blog post you will learn inner join using lambda queries. There will be two samples, in first sample you will see how you can join two tables and in second sample you will see how you can extend even further to join three tables and so on. I will sample in-memory data, but the same implementation will work with IQueryable (lazy query) too. Here's the code snippet:- namespace ConsoleApp1 {     class Program     {         static void Main()         {             var table1 = new List<Table1>();             table1.Add( new Table1 { Id = 1, Name = "Name 1" , Address = "Address 1" });             table1.Add( new Table1 { Id = 2, Name = "Name 2" , Address = "Address 2" });             table1.Add( new Table1 { Id = 3, Name = "Name 3" , Address = "Address 3" });             table1.Add( new Table1 { Id = 4, Name = "Name 4" , Address = "Address 4" });   
Read More »