Post
Ask Question

Toggle and Animate an Image and Block using jQuery


Introduction: Here we will discuss that how to animate or toggle an image using jQuery, In this article we will learn about this. We have to take an Image and we want to toggle or animate it on click event of button it will happen using jQuery. Further we will also see that how to reset that animate or toggle images using jQuery. Animation or toggle a image using jQuery is much easier as much as we know about animation it is used to moving or running anything that you want. let's see how we will toggle or animate an image there are some steps which you have to follow to create such type of programmed.

Step 1: Firstly I would like to take a website application let see below.

  • Open the visual studio 2010.
  • Take a new Website.
  • Take a new website
Web Application

Step 2: Now we have to add a new page to the website.

  • Go to solution explorer.
  • Add new item
  • Select Web page and give it any name
  • Click OK.

Add New Item

Add New Form

Step 3:  Now you have to add some image to the site let's see how will you added them

  • First You will add a folder name as Images.
  • Right click on folder name as Images
  • Select add existing item.
  • Add the image to that folder.
  • Click OK.
Adding Image

Step 4: In this step you will have to add the reference of jQuery files which is always write to the head section of the web page is given below.

Code:
<head runat="server">
    <title></title>
  <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
  <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
 </head>

Step 5: Further you have to write the jQuery code which you can placed it into Head section or body section to the source page of default2.aspx page file.

JQuery Code:

<script type="text/javascript">
     $("#anmt").click(function () {
        $("#i1").animate({
            width:  "40%",
            opacity: 0.9,
            marginLeft: "0.6in"
        }, 1000);
    });
    $("#rst").click(function () {
        $("img").css({ width: "", fontSize: "", borderWidth: "" });
    });
    $("#rst").click(function () {
        $("#d1").css({ width: "", fontSize: "", borderWidth: "" });
    });
    $("#tgl").click(function(){$("#i1").animate({width:['toggle', 'swing'],height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 200);
    });
    $("#tgl").click(function(){$("#d1").animate({width:['toggle', 'swing'],height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 200);
    });
    $("#anmt").click(function () {
       $("#d1").animate({
         width: "40%",
         opacity: 0.9,
         marginLeft: "0.6in",
         fontSize: "3em",
         borderWidth: "10px",
       }, 1500);
    });
</script>

Code Description: Here we will discuss about the code using in jQuery first of all we have to take a click event $("#anmt").click(function () which is used to bind an event handler to the "click" which is a  JavaScript event, or have to trigger that event on an element. Inside it we will use a method name as .animate() which is used to define that what you want to do with the object when it will animate or toggle thus we are setting some properties name as width, opacity will increases whenever it will animate and also defines the duration till the image animate. $("#i1") in this #i1 is the id of  that image which we want to animate. Further functions on click event decide that reset the image or toggle the images. Last function will also animate the block in which we are passing id of the block and the added the functionality which will execute whenever we will click on the button.

Step 6: In this step we will see the complete code to the source file of Default2.aspx page.

Complete Code:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="moveimage.aspx.cs" Inherits="moveimage" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
    <title>Move An Image</title>
     <style type="text/css">
     #i1
         {
             background-color:Maroon;
             width: 161px;
             border:5px blue;
             border-width:thick;
             border-style:groove;
         }
     div
         {
             background-color:orange;
             width :100px;
             border:5px pink;
             border-width:thick;
             border-style:groove;
         }
     </style>
 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
</head>
<body>
 <button id="anmt" style="background-color: #FFCC66">&raquo; Animate Image</button>
 <button id="rst" style="background-color: #993333">&raquo; Reset Image</button>
 <button id="tgl" style="background-color: #99FFCC">&raquo; Toggle Image</button>
 <div id="d1">Aquarium Image</div>
 <img src="aquarium-wallpaper-240x150-1111036.jpg" alt="image" id="i1" />
 <script type="text/javascript">
     $("#anmt").click(function () {
        $("#i1").animate({
            width:  "40%",
            opacity: 0.9,
            marginLeft: "0.6in"
        }, 1000);
    });
    $("#rst").click(function () {
        $("img").css({ width: "", fontSize: "", borderWidth: "" });
    });
    $("#rst").click(function () {
        $("#d1").css({ width: "", fontSize: "", borderWidth: "" });
    });
    $("#tgl").click(function(){$("#i1").animate({width:['toggle', 'swing'],height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 200);
    });
    $("#tgl").click(function(){$("#d1").animate({width:['toggle', 'swing'],height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 200);
    });
    $("#anmt").click(function () {
       $("#d1").animate({
         width: "40%",
         opacity: 0.9,
         marginLeft: "0.6in",
         fontSize: "3em",
         borderWidth: "10px",
       }, 1500);
    });
</script>
    <form id="form1" runat="server">
    </form>
 </body>
</html>

Step 7: In this step we have to see the Design of the Default2.aspx page.

Before Run:

Design Page
Step 8: Further we are going to run the application by pressing F5.

Output: By pressing first button.

On Press Button1

Output: By pressing second button.

On Pressing Second Botton

Output: Before pressing third button.

Before Pressing Button Third

Output: After pressing third button it will disappear.

Toggle an Image


Similar Articles