JQuery fades from one picture to another, such as HTML with the bottom:
Copy Code code as follows:
<div class= "Fade" >
</div>
First, make sure the div is the same size as the picture, and this div has another background image, as follows:
CSS code:
Copy Code code as follows:
. Fade
{
Background-image:url (' images/2.jpg ');
width:300px;
height:225px;
}
The JQuery code is as follows:
Copy Code code as follows:
$ (document). Ready (function () {
$ (". Fade"). Hover (function () {
$ (this). FIND ("img"). Stop (True, true). Animate ({opacity:0}, 500);
}, function () {
$ (this). FIND ("img"). Stop (True, true). Animate ({opacity:1}, 500);
});
});
Full implementation code:
Copy Code code as follows:
<div class= "Fade" ></div>
<style type= "Text/css" >
. Fade
{
Background-image:url (' 2.jpg ');
width:300px;
height:225px;
margin:0 Auto 15px;
}</style>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". Fade"). Hover (function () {
$ (this). FIND ("img"). Stop (True, true). Animate ({opacity:0}, 500);
}, function () {
$ (this). FIND ("img"). Stop (True, true). Animate ({opacity:1}, 500);
});
});
</script>
Author: jquery Learning