Video tutorial to illustrate animation of text and image using jQuery.
In this tutorial, we accomplish:
Animation of text: using animate method.
Display of hidden image: using fadeIn method.
Toggle of image: using slideToggle method.
Change the color of the text being animated: using jQuery’s css method.
xHTML code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html>
<head><title>jQuery Basics</title>
</head>
<body> <button id="top">Move Top</button>
<button id="down">Move Down</button>
<button id="blue">Blue Coloring!</button>
<button id="img_show">Show Image</button>
<div id="move">jQuery is awesome!</div>
<img src="https://technotip.com/logo.png"/>
</body>
</html> |
Here we have 4 buttons, 1 div tag which contains some string in it, and 1 image tag.
Each button has its own unique ID, which is referenced to track user click event.
CSS code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style type="text/css">
#move{
position: absolute;
top: 200;
left: 400;
}
img {
display: none;
padding: 10px;
position: absolute;
top: 100;
left: 400;
}
</style> |
Using Cascading Stylesheet we position the string present in div tag and the image conveniently on our web page.
jQuery
Move Top
1 2 3 4 5 6 7 | $(document).ready( function() {
$("#top").click( function() {
$("#move").animate({top: 30}, 200);
});
}); |
Once the #top button is clicked, the string inside div tag(which has move as its id), moves upwards leaving 30px from top of the document and 200px from left.
Move Down
1 2 3 4 5 6 7 | $(document).ready( function() {
$("#down").click( function() {
$("#move").animate({top: 200}, 200);
});
}); |
Once the #down button is clicked, the string inside div tag(which has move as its id), moves down leaving 200px from top of the document and 200px from left.
Changing CSS property/value using jQuery
1 2 3 4 5 6 7 | $(document).ready( function() {
$("#blue").click( function() {
$("#move").css("color", "blue");
});
}); |
Once the #blue button is clicked, the color of string inside div tag(which has move as its id), changes to blue.
.css() method takes 2 parameters, first one being css property and the second one its value.
Toggle image with sliding effect
1 2 3 4 5 6 7 | $(document).ready( function() {
$("#img_show").click( function() {
$("img").slideToggle("slow");
});
}); |
Once the #img_show button is clicked, the image slides and toggles with slideIn and slideOut effect.
Image appears on the web page with fadeIn effect
1 2 3 4 5 6 7 | $(document).ready( function() {
$("#img_show").click( function() {
$("img").fadeIn("slow");
});
}); |
Once the #img_show button is clicked, the hidden image fades into the web page.
The image is hidden with the help of css.
Video Tutorial: Animation of Text and Image: jQuery
[youtube https://www.youtube.com/watch?v=1nDGjCrfvrU]
Full code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <html>
<head><title>jQuery Basics</title>
<script src="script/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#top").click( function() {
$("#move").animate({top: 30}, 200);
});
$("#down").click( function() {
$("#move").animate({top: 200}, 200);
});
$("#img_show").click( function() {
$("img").slideToggle("slow");
});
$("#blue").click( function() {
$("#move").css("color", "blue");
});
$("#txt_toggle").click( function() {
$("#move").slideToggle("slow");
});
});
</script>
<style type="text/css">
#move{
position: absolute;
top: 200;
left: 400;
}
img {
display: none;
padding: 10px;
position: absolute;
top: 100;
left: 400;
}
</style>
</head>
<body> <button id="top">Move Top</button>
<button id="down">Move Down</button>
<button id="txt_toggle">Text Toggle</button>
<button id="blue">Blue Coloring!</button>
<button id="img_show">Show Image</button>
<div id="move">jQuery is awesome!</div>
<img src="https://technotip.com/logo.png"/>
</body>
</html> |
Watch previous day videos and you’ll understand today’s and forthcoming video tutorials easily.
Previous Day Videos:
jQuery Basics: Replace Text/String Inside HTML Document
jQuery: Selectors, Methods, Effects
jQuery: Basic Image Effects