By using the JQuery Animate method, CSS properties applied to HTML tags can be changed and animations can be obtained in this way.

The use of the Animate method is as follows:

$(selector).animate({parameters},Speed,callback);

Css properties and values ​​to be changed are written in the Parameters section. Speed ​​and callback parameters are optional and may not be used. The speed value can be a value in milliseconds or slow, fast. The use of the callback method has been explained in previous topics.

Animate method examples: (You can try it yourself by changing these codes in the examples section.)

$(document).ready(function(){
$("#button1").click(function(){
 $("#box1").animate({left: '120px'},2000);
});

$("#button2").click(function(){
 $("#box1").animate({width: '180px'},"slow");
});

$("#button3").click(function(){
 $("#box1").animate({height: '180px'},"fast");
});
});

Key Points for Creating JQuery Animation:

Almost all CSS properties of objects can be changed with the jQuery animate method. However, color changes may not work with the animate method. If you also want to change colors during animation, you need to download the “Color Animations Plugin” plugin from http://plugins.jquery.com/. Also, we should not use the "-" character when writing CSS properties in the animate method. For example, we should write marginLeft instead of margin-left. (Camel Cased spelling standard) In order for objects to be moved, position properties must initially be made absolute, fixed or relative. (see Position Feature) Additionally, if you want to set the initial value of the features to be changed, their initial values ​​can be determined with CSS.

Changing Multiple Properties with the Animate Method

It is also possible to create animation by changing multiple properties of an object simultaneously.

Example:

$(document).ready(function(){
$("#button1").click(function(){
 $("#box1").animate({
 left: '120px',
 opacity: '0.3',
 height: '180px',
 width: '180px',
 fontSize:'36pt'
 });
});
});

Creating Animation by Increasing CSS Properties by a Certain Amount

In the example above, box1 is shifted 120px to the right by using left:'120px'. Even if the button is clicked again, there will be no further movement as box1 will already be at the specified position. For example, if we want box1 to shift 50px to the right every time the button is clicked, we can use left:'+=50px'.

Example:

$(document).ready(function(){
$("#button1").click(function(){
 $("#box1").animate({
 left: '+=50px',
 height: '+=10px',
 width: '+=10px',
 });
});
});

In the example above, each time button1 is clicked, box1 will move 50px to the right, and its width and height will increase by 10px.

Applying Show – Hide – Toggle to CSS Values Instead of giving a certain value to CSS properties in the Animate method, Show-hide and toggle values ​​can be given. For example, using width:'hide' causes the width of the object to decrease to 0.

Example:

$(document).ready(function(){
$("#button1").click(function(){
 $("#box1").animate({width: 'show'},"slow");
});

$("#button2").click(function(){
 $("#box1").animate({width: 'hide'},"slow");
});

$("#button3").click(function(){
 $("#box1").animate({width: 'toggle'},"slow");
});
});

Animation Queue – Playing Animations Sequentially

If you want to play many animations one after the other (after one animation ends, the next one starts), the following method can be used.

Example:

$(document).ready(function(){
$("#button1").click(function(){
 var object = $("#box1");
 object.animate({height: '200px', opacity: '0.5'}, "slow");
 object.animate({width: '200px', opacity: '1'}, "slow");
 object.animate({height: '100px', opacity: '0.5'}, "slow");
 object.animate({width: '100px', opacity: '1'}, "slow");
});
});

// If we use normal as below instead of using it this way, the animations will start at the same time.

$(document).ready(function(){
$("#button1").click(function(){
 $("#box1").animate({height: '200px', opacity: '0.5'}, "slow");
 $("#box1").animate({width: '200px', opacity: '1'}, "slow");
 $("#box1").animate({height: '100px', opacity: '0.5'}, "slow");
 $("#box1").animate({width: '100px', opacity: '1'}, "slow");
});
});