Home > Developer > JavaScript
Today, I practiced the following code for the Jquery fade-in and fade-out feature:
Copy codeThe Code is as follows:
<! 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>
<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>
</Head>
<Body>
<Div id = "gallery1">
<H2> CSS solution <A href = "1.jpg">
<Span> </span>
</A>
<A href = "2.jpg">
<Span> </span>
</A>
</Div>
<Div id = "gallery2">
<H2> jQuery solution <A href = "1.jpg">
</A>
<A href = "2.jpg">
</A>
</Div>
</Body>
</Html>
Images used:
An example of Fade-in and fade-out is as follows:
Copy codeThe Code is as follows:
<Body>
<Form action = "" method = "post" id = "myform">
<Button value = "Click Me"> Click Me </button>
<P style = "background: red;"> context <br> context </p>
</Form>
</Body>
</Html>
Jquery code
Copy codeThe Code is as follows:
$ (Document). ready (
Function (){
/* Fade in and 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
