jQuery Tutorial

jQuery Get()/Post() Methods jQuery load() Method Introduction to AJAX jQuery CSS() Method jQuery CSS Classes jQuery Remove jQuery Add Getting and setting content Introduction to DOM manipulation jQuery Stop Effect jQuery Animation Effect jQuery Sliding Effect jQuery Fading Effect jQuery hide/show Effect jQuery Document/Window Events jQuery Form Events jQuery Keyboard Events jQuery Mouse Events jQuery Events jQuery Selectors jQuery Example jQuery Syntax How to use jQuery jQuery Introduction jQuery Tutorial jQuery each() method

jQuery Animation Effect
2018-06-27 11:10:38

jQuery Animation Effect

The jQuery animate() method is a way to create custom animations. The jQuery animate() method is used to animate numeric properties of CSS. Syntax: 

$(selector).animate({params}, speed, callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds. callback: Callback is an optional parameter. It represents a function to be executed after the completion of the animate() method. params: It defines the CSS properties to be animated.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("button").click(function(){  
        $("div").animate({left: '250px'});  
    });  
});  
</script>   
</head>  
<body>   
<button>Click here to Start Animation</button>   
<p>all the HTML elements are in static position by default and cannot be moved.   
if you want to manipulate the position then remember to first set the CSS position property of   
the element to fixed, absolute or relative!</p>    
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>   
</body>  
</html> 
Try Now