jquery rollover mouse fade image -


i have jquery script replace image when rollover wit mouse on image.

i want changed fading.

what need do?

thanks!

<img src='images/dogysitter_s.png' alt='' id='first'  />    <script  type='text/javascript'> $(document).ready(function(){     $("#first").hover(         function() {$(this).attr("src","images/dogysitter_c.png");},         function() {$(this).attr("src","images/dogysitter_s.png");     }); }); </script> 

this fade element out, swap images, , fade element in (animating opacity avoid issues mouseleave being triggered when element fades out) :

$(document).ready(function(){     $("#first").on({         mouseenter: function() {              $(this).animate({opacity: 0}, 400, function() {                  $(this).attr('src', 'images/dogysitter_c.png')                        .animate({opacity: 1}, 400);             });         },         mouseleave: function() {             $(this).animate({opacity: 0}, 400, function() {                  $(this).attr('src', 'images/dogysitter_s.png')                        .animate({opacity: 1}, 400);             });         }     }); }); 

for cross fading you'd need 2 elements


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -