This simple html page that loads an image with different fading effect.
<!DOCTYPE html>
<html>
<head><title>Fadein with jquery example</title></head>
<body>
<img id="image" src="img/school.png" height="600px" width="800px" style="display:none"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadein.js"></script>
</body>
</html>
Below is a jquery code for fading in an image. The fading in completes in 4000 milisecond or 4 seconds. Alternately, you can give slow or medium or fast effect to fade in.
//fadein.js $(document).ready(function(){
$('#image').fadeIn(4000); //or fadeIn('slow');
});
Below is a jquery code for fading out an image. The fading out completes in 4 seconds. Alternately, you can give slow or medium or fast effect to fade out.
Note: In the above html page, change the src="fadein.js" to src="fadeout.js".
//fadeout.js
$(document).ready(function(){
$('#image').fadeOut(4000); //or fadeOut('slow');
});
Below is a jquery code for toggling a fading effect. After clicking the button, the image fade out if already faded in and vice versa.
Note: Note: In the above html page, change the src="fadein.js" to src="fadetoggle.js".
//fadetoggle.js
$('#btn').click(function(){
$('#image').fadeToggle(4000);
});
<!DOCTYPE html>
<html>
<head><title>Fadein with jquery example</title></head>
<body>
<img id="image" src="img/school.png" height="600px" width="800px" style="display:none"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadein.js"></script>
</body>
</html>
Below is a jquery code for fading in an image. The fading in completes in 4000 milisecond or 4 seconds. Alternately, you can give slow or medium or fast effect to fade in.
//fadein.js $(document).ready(function(){
$('#image').fadeIn(4000); //or fadeIn('slow');
});
Below is a jquery code for fading out an image. The fading out completes in 4 seconds. Alternately, you can give slow or medium or fast effect to fade out.
Note: In the above html page, change the src="fadein.js" to src="fadeout.js".
//fadeout.js
$(document).ready(function(){
$('#image').fadeOut(4000); //or fadeOut('slow');
});
Below is a jquery code for toggling a fading effect. After clicking the button, the image fade out if already faded in and vice versa.
Note: Note: In the above html page, change the src="fadein.js" to src="fadetoggle.js".
//fadetoggle.js
$('#btn').click(function(){
$('#image').fadeToggle(4000);
});
No comments:
Post a Comment