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
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.
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.
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.
Join the conversation! Your thoughts help the community grow.