Video tutorial illustrates the fadeToggle, fadeIn, fadeOut effect on image using jQuery.
jQuery Code
1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript">
$(document).ready( function() {
$("#togg").click( function() {
$("img").fadeToggle("slow");
});
});
</script> |
Once the document is ready and the user clicks on the button(with togg as its id), the image fades In and fades Out.
This fadeIn and fadeOut effect is accomplished using fadeToggle method of jQuery.
To understand the basic coding of jQuery, please watch previous day videos about selectors and methods.
Complete Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html>
<head><title>Image Toggle</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<style type="text/css">
img{
position: absolute;
top: 100;
left: 200;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$("#togg").click( function() {
$("img").fadeToggle("slow");
});
});
</script>
</head>
<body>
<img src="https://technotip.com/logo.png" />
<button id="togg">Toggle Image!</button>
</body>
</html> |
Inside the HTML document we have added a image and a button. Once the user clicks on this button, our jQuery code gets executed and the fade In and fade Out effect is presented to the user.
For the jQuery code to be interpreted by the javascript interpreter, we need to include the jQuery standard library file to our web page.
Some basic CSS makes the image look well positioned.
Video Tutorial: jQuery: Basic Image Effects
[youtube https://www.youtube.com/watch?v=CQUeZ7WcOgM]
Practice this image effect program and also try using
.fadeIn();
.fadeOut();
.slideIn();
.slideOut();
.slideToggle();
functions instead of .fadeToggle(); function.
Also notice that, page doesn’t reload while you perform these DOM manipulations using jQuery. This is a major advantage which builds up rich user experience.