Apparition d’un élément en fondu avec JQuery sur le survol de souris

La fonction suivante permet de faire un fondu entre deux images lors du passage de la souris sur l’élément #monimage

Le principe : Lors du survol de #monimage dont le background est ‘image1.png’ un élément div temporaire (#temp) est créé #temp dont le background est ‘image2.png’. On affiche cet élément en fondu grâce  la fonction animate de JQuery. Il est possible d’optimiser le chargement de l’image en utilisant les sprites (inclure image1.ppng et image2.png dans la même image et jouer sur la position du background lors de l’affichage)

Petit exemple ici

Code CSS :

#monimage{
background:url('image1.png') no-repeat top left;
}

Code JQuery  :

<script>
$("#monimage").hover(
  function(){
   // La souris passe sur l'élément
   $("#temp").remove()
   $(this).append("<div id='temp'></div>"); // Création d'un div temporaire qui va héberger l'image en surimpression
   bgimg = "url(image2.png)";
   $(this).find("#temp").css({position:"absolute",background:"transparent "+bgimg+" no-repeat",opacity:0});
   $(this).find("#temp").stop().animate({opacity:1},500);  }, 
function(){

   // La souris sort de l'élément
     $(this).find("#temp").stop().animate({opacity:0},500,function(){$(this).remove()});
  }
)
</script>