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
jQuery Basics
jQuery is awesome!
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
Using Cascading Stylesheet we position the string present in div tag and the image conveniently on our web page.
jQuery
Move Top
$(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
$(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
$(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
$(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
$(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
Full code
jQuery Basics
jQuery is awesome!
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
View Comments
IT is not working !!!! the buttons are there but nothing is working !! I filled all the code and there is no error !!
@ghassen chermiti, I guess you forgot to include jquery-1.8.1.min.js file inside your script folder. Get it from jQuery.com
aah yess I figured it out 10 min after!
Thanks a lot :D