Creating a simple fade over effect – JQuery

Here , i will tell you how to add a fade over /fade in effect to image button in jquery. its very simple……………………………

1. Import jquery

<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>

2. Add a div tag with image in it

<div class="fadeDiv">
    <img src="1jpg" alt="" />
    <img src="2.jpg" alt="" />
</div>

3 .  Add script Jquery on load

$(document).ready(function(){
 $("img").hover(
 function() {
 $(this).animate({"opacity": "0"}, "slow");
 },
 function() {
 $(this).animate({"opacity": "1"}, "slow");
 }
 );
});

That’s it . you can now see the fade in and fade out effect on mouse over the button
you can change the js to add more functionalites.