jQuery Animation Examples With Code
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this article we will show you the solution of jQuery animation examples with code, here we are going to show you example to achieving result with the help of fadeOut() method.
The fadeout() method was defined for use fadeout animation effect on html text or image in webpage.
There are some other animation effects also available you can try those if you need or check.
On the other hand you can create example with the help of external animation support file. When using other source file you can explore unlimited crazy animation on webpage.
Step By Step Guide On jQuery Animation Examples With Code :-
Here we defined html block with h3 tag for define some text which is used for test animation effect.
In script block we defined ready() method which is automatically loads program when open browser within that specified ‘fadeOut()’ with time value ‘1500’ and last appends with h3 element.
Up to the time limit that animation will happen, you can also reduce or increase time limit of animation.
<!DOCTYPE html>
<html>
<head>
<title>Animation Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("h3").fadeOut(1500);
});
</script>
<body>
<h3>Fadeout Animation Loaded...</h3>
</body>
</head>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() function, within that we appending fadeOut() animation with h3 element. The time ‘1500’ indicates milliseconds for happen fadeout animation on h3 text.
- In body block we defined h3 element with text ‘Fadeout Animation Loaded...’ for showing result of fadeout animation.
- Using same way you can add ‘fadeIn, toggleDown, toggleUp’ animation as per your choice you will get error free animation result.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to apply animation example in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we executes this program on browser we can see text ‘Fadeout Animation Loaded...’ with fadeout animation process.
I hope this article on jQuery animation examples with code helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
