Hello Readers,
The jQuery animate() method is used to create custom animations.
If you want to create some animation effect in your HTML, then you can use jQuery .animate() method for the same.
We use following syntax for create animation.
Syntax: $(selector).animate( {styles}, speed, easing, callback)
jQuery animate() method includes four parameter i.e. styles, speed, easing, callback.
Parameters:
styles: styles parameter determines one or more CSS properties to animate.
speed or (duration): This parameter is optional, which determines the speed of the animation(slow, fast or milliseconds). It's default value is 400 ms.
easing: Easing is also a optional parameter which determines the speed of the element at different points of the animation. It's default value is swing.
You need to include easing scripts to use the easing parameter. you can download the scripts link here
If you want to make easing compatible with browser , then you need to include this script in your project.
The jQuery easing plugin provide 30 different easing methods. Let's check some of them out.
Easing is applied only with animate method. The effects helper methods like hide('fast'), .show('fast'), fadeIn('fast'), .toggle('fast') and so on.
callback: This function to be executed after the animation completes.
Here are two ways to use the easing with the .animate() method. For example, let's say I want to animate the left of a particular div. The first way to call .animate() is like this:
<script type="text/javascript">
$('#myDiv').animate(
{ left: 600 }, // what we are animating
3000, // how fast we are animating
easeOutBounce, // the type of easing
function() { // the callback
alert('done');
});
</script>
Here is the second way is very similar and might even look the same at first animate script.
<script type="text/javascript">
$('#myDiv').animate(
{ left: 600 }, // what we are animating
{
duration: 3000, // how fast we are animating
easing: 'easeOutBounce', // the type of easing
complete: function() { // the callback
alert('done');
}
});
</script>
The difference is that the second method signature takes only two arguments: the properties we are animating and an object literal of settings/options. The first method signature separates out the settings/options into individual arguments.
Here is the complete code for the animate() method with all parameters.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#easingExp1').click(function(event) {
$(this).animate({ left: 600 }, {
duration: 3000,
easing: 'easeOutBounce'
})
.animate(
{ left: 0 }, {
duration: 3000,
easing: 'easeOutBounce',
complete: function() { // the callback
alert('done!');
}
});
});
});
</script>
</head>
<body>
<div class="easingExample" id="easingExp1" style="left: 0px; width:100px; background: #c00; position: absolute; text-align: center; color: #fff;">Click Me</div>
</body>
</html>
Find The Demo here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#easingExp1').click(function(event) {
$(this).animate({ left: 600 }, {
duration: 3000,
easing: 'easeOutBounce'
})
.animate(
{ left: 0 }, {
duration: 3000,
easing: 'easeOutBounce',
complete: function() { // the callback
alert('done!');
}
});
});
});
</script>
Click Me
Thanks
0 Comment(s)