Here, we will see how to use the css() and animate() methods in jQuery. In jQuery the css () method can change the style of elements. We create a div element which contains text; when we move mouse over the text we use the css method to change the color of the text and when the mouse leaves, the text color is shown in a different color. In JQuery the animate() method is also very useful. By using this method we can change the size of elements. In this example we create a div element which contains an Image when we move the mouse over the image. The image size will be changed.
First you have to create a web site.
- Go to Visual Studio 2010
- New-> Select a website application
- Click OK
Now add a new page to the website.
- Go to the Solution Explorer
- Right Click on the Project name
- Select add new item
- Add new web page and give it a name
- Click OK
How to execute jQuery code
There are two ways you may want to execute jQuery codes.
1. As and when page loads, execute the JQuery code
<script language="javascript" type="text/javascript">
$("#div1").css("Color", " green");
</script>
The benefit of executing a jQuery code in this way is that it doesn't wait until the entire page loads completely, so in case you want the user to see the effects as soon as the corresponding elements are loaded, you can use this.
2. Execute jQuery only when the complete DOM objects (the complete page has been loaded).
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#div1").css("Color", "Red");
});
</script>
This way makes sure that jQuery code will execute only if the complete page has been loaded in the browser so you are assured that the user will not see any undesired behavior on the page.
CSS method in JQuery
In jQuery the css() method is very useful. By using this method we can change the style of elements. In this example we create a div element which contains text; when we move the mouse over the text we use the css method to change the color of text and when the mouse leaves, the text color is shown in a different color.
Example: We are showing you the complete code for the .aspx page given below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="css.aspx.cs" Inherits="WebApplication121.css" %>
<!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></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#dv").mouseover(function () { //mouseover function will execute when mouse pointer will reach on <div>element
$("#dv").css("color", "red"),
$("#dv").mouseleave(function () {
$("#dv").css("color", "blue"); //when mouse leave text css will apply on <div> element
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id ="dv" style="width:300px;height:100px;position:relative"> <!--div element contain some text-->
jQuery is great library for developing ajax based application.
jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications.
</div>
</form>
</body>
</html>
Now run the application and move the mouse over the Text.
Now move the mouse from the Text.
animate method in JQuery
In jQuery the animate() method is very useful. By using this method we can change the size of elements. In this example we create a div element which contains an Image; when we move the mouse over the image, the image size will change. First of all you add an image to the application. Add a new form to the application and add the following HTML code to the aspx page.
<div style="height: 100px; width: 100px; position: relative">
<img src="animate.gif" id="img" />
</div>
Now add the following code in the head section.
<script type="text/javascript">
$(document).ready(function () {
$("div").mouseover(function ()//mouseover function will execute when mouse pointer will reach on <div>element
{
$("img").animate({ height: 300 }, "slow"); //image height will change by using animate method
$("img").animate({ width: 300 }, "slow");
$("img").animate({ height: 100 }, "slow");
$("img").animate({ width: 100 }, "slow");
});
}
);
</script>
In the above code we create a mouseover function.
$("img").animate({ height: 300 }, "slow"); //image height will change by using animate method
$("img").animate({ width: 300 }, "slow");
$("img").animate({ height: 100 }, "slow");
$("img").animate({ width: 100 }, "slow");
This code defines how to change the image height using the animate method.
Now run the application.
The image height and width will change when the mouse pointer is over the image as shown below.
Some Helpful Resources