Animation of Text and Image: jQuery

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

Move Top Move Down Blue Coloring! Show Image   jQuery is awesome!

Move Top Move Down Blue Coloring! Show Image

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

Move Top Move Down Text Toggle Blue Coloring! Show Image jQuery is awesome!

Move Top Move Down Text Toggle Blue Coloring! Show Image

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