JQuery fades out an image to another image, for example, the following html:
Copy codeThe Code is as follows:
<Div class = "fade">
</Div>
First, make sure that the div size is the same as the image size. This div has another background image, as shown below:
Css code:
Copy codeThe Code is as follows:
. Fade
{
Background-image: url ('images/2.jpg ');
Width: 300px;
Height: 225px;
}
The jQuery code is as follows:
Copy codeThe Code is 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 );
});
});
Complete implementation code:
Copy codeThe Code is 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