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

<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]

YouTube Link: https://www.youtube.com/watch?v=1nDGjCrfvrU [Watch the Video In Full Screen.]



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

      

Related posts:

3 thoughts on “Animation of Text and Image: jQuery”

  1. IT is not working !!!! the buttons are there but nothing is working !! I filled all the code and there is no error !!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *