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
Post a Comment