Today I practiced a jquery fade feature code as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script type= ' text/javascript ' src= ' jquery-1.2.6.min.js ' ></script>
<style type= "Text/css" >
#gallery1 {width:100%; overflow:hidden;}
#gallery1 a {position:relative; float:left; margin:5px;}
#gallery1 a span {display:none background-image:url (zoom.png); background-repeat:no-repeat; width:48px; height:48px; Position:absolute; left:15px; top:15px;}
#gallery1 img {border:solid 1px #999; padding:5px;}
#gallery1 a:hover span {Display:block}
#gallery2 {width:100%; overflow:hidden;}
#gallery2 a {position:relative; float:left; margin:5px;}
#gallery2 a span {display:none background-image:url (zoom.png); background-repeat:no-repeat; width:48px; height:48px; Position:absolute; left:15px; top:15px;}
#gallery2 img {border:solid 1px #999; padding:5px;}
</style>
<script>
$ (document). Ready (function () {
$ ("#gallery2 a"). Append ("<span></span>");
$ ("#gallery2 a"). Hover (function () {
$ (this). Children ("span"). FadeIn (600);
},function () {
$ (this). Children ("span"). fadeout (200);
});
});
</script>
<body>
<div id= "Gallery1" >
<a href= "1.jpg" >
<span></span>
</a>
<a href= "2.jpg" >
<span></span>
</a>
</div>
<div id= "Gallery2" >
<a href= "1.jpg" >
</a>
<a href= "2.jpg" >
</a>
</div>
</body>
Pictures to use:
A small example of fading:
Copy Code code as follows:
<body>
<form action= "" method= "post" id = "MyForm" >
<button value= "click Me" >click me</button>
<p style= "background:red;" >context<br>context<br>context<br>context</p>
</form>
</body>
jquery Code
Copy Code code as follows:
$ (document). Ready (
function () {
/* fade in/fade out * *
$ ("button"). Toggle (
function () {
$ ("P"). Fadeout ("Fast", function () {
}
)
},
function () {
$ ("P"). FadeIn ("Fast", function () {
}
)
}
);
});
Demo Code http://demo.jb51.net/js/zoom_icon%20to_images/index.htm
