jQuery Tutorial
In jQuery, fadeTo method is used to create the custom animation using CSS properties of the selected element in the web page.
jquery animation syntax
$(selector).animation({CSS properties}, speed of animation, easing, callback function)
In jQuery, only CSS properties field is required and remaining other parameters are optional for animationmethod.
"fast" - animate the element faster.
"normal" - animate the element in normal.
"slow" - animate the element slower.
milliseconds - Element animation is based on specified milliseconds.
"swing" - In middle of the animation is faster but slower in beginning and end of animation.
"linear" - Animation is consistent from beginning to end.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery animate method</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnAnimate').click(function () { $("#divTitle").animate({width:'350px',height:'350px', opacity:'0.4', margin:'100px'}, 15000, function () { alert("customm animation example!") }); }); }); </script> </head> <body> <input type="button" id="btnAnimate" value="Animate"/> <div id="divTitle" style="height:200px;width:200px;background-color:blue;color:white;"> div element animate testing! </div> </body> </html>Output:
Hidden div element
Fades div after clicking on Fade To button
jQuery animate method is using CSS properties to animate to the selected element.
$(document).ready(function () { $('#btnAnimate').click(function () { $("#divTitle").animate({ width: '350px', height: '350px', opacity: '0.4', margin: '100px' }); }); });
callback function is used to display the alert message once animates the div element for specified CSS properties when clicking on Animate button.
$(document).ready(function () { $('#btnAnimate').click(function () { $("#divTitle").animate({width:'350px',height:'350px', opacity:'0.4', margin:'100px'}, function () { alert("customm animation example!") }); }); });
Animates the div element with opacity changes for 10000 milliseconds, and callback function is used to display alert message once displayed faded div with specified opacity value.
$(document).ready(function () { $('#btnAnimate').click(function () { $("#divTitle").animate({ width: '350px', height: '350px', opacity: '0.4', margin: '100px' }, 10000 , function () { alert("customm animation example!") }); }); });« Previous Next »
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page