Use jquery of change Opacity on Mouse over

-

Change Opacity of Image on Mouse over by Jquery:



In this Example we give a example in which explain how to use css Opacity property. How to use Jquery for change Image opacity in asp.net page.
In fallowing browser
  • IE9,
  • Firefox,
  • Chrome,
  • Opera,

And Safari uses the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.
But IE8 work as:

img {
    opacity: 0.4;
    filter: alpha(opacity=40); 
    }

Jquery Example for change Image opacity:

Use jqery-1.8.2.js file.
For using this we give a url here. http://code.jquery.com/jquery-1.8.2.js 

JQuery Function for set opacity of image:

cript type="text/javascript">
    $(function () {
        $("#image1").css("opacity", 0.3);
        $("#image1").hover(function () {
            $(this).animate({ opacity: 1.0 }, 500);
        }, function () {
            $(this).animate({ opacity: 0.3 }, 500);
        });
    })

Use this function within script tag in html page had section:

Jquery in asp.net page Example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imageoptimizationExample.aspx.cs" Inherits="imageoptimizationExample" %>

<!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>
<title>Change Image Opacity Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
    $(function () {
        $("#image1").css("opacity", 0.3);
        $("#image1").hover(function () {
            $(this).animate({ opacity: 1.0 }, 500);
        }, function () {
            $(this).animate({ opacity: 0.3 }, 500);
        });
    })
</script>
    <style type="text/css">
        #logoimage
        {
            height: 190px;
            width: 303px;
        }
    </style>
</head>
<body>
<form id="form1">
<div align="center">
<h2>......Change Image Opacity on Mouse Over by JQuery...... </h2>

<div>
<img id="image1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyi0wHhuS5rmEF1NzEABOu7rRCpH8J3XzyRbxrj82fE-19ygVVUw" />
</div></div>
</form>
</body>
</html> 

Jquery Example Image opacity:


Other Jquery Related Examples:



Learn About MVC:

Comments

Post a Comment