2010-06-22 18 views
1

ici mon code-effet de renversement d'image dans jquery?

$('.smenu li').mouseover(function(){ 
     var src = $(this).find('a').attr('href'); 
     $('.hbg').css('background-image', 'url(' + src + ')'); 
     }); 

html code-

<div class="smenu"> 
       <ul> 
        <li ><a href="images/hosp.jpg"><img src="images/menu_hosp.jpg" border="0"></a></li> 
        <li ><a href="images/edu.jpg"><img src="images/menu_edu.jpg" border="0"></a></li> 
        <li ><a href="images/enter.jpg"><img src="images/menu_enter.jpg" border="0"></a></li> 
        <li ><a href="images/retail.jpg"><img src="images/menu_retail.jpg" border="0"></a></li>      
       </ul> 
       </div> 

cela Workin bien, mais comment puis-je mettre des effets de survol pendant le changement d'image parce que maintenant son changement juste l'image backgroun avec un flash sur la souris sur, je veux fondu fade-out ou autre chose ...

Répondre

1

J'ai déjà eu un problème comme celui-ci. Vous devrez prendre l'image actuellement affichée et la mettre en arrière-plan. Ensuite, injectez un tag img sur l'arrière-plan (caché), chargez l'image suivante dans l'étiquette de l'image, puis fondez-le. Cela devrait vous donner une transition assez simple pour travailler avec. De là, vous pouvez regarder glisser dans l'image pour quelque chose de plus sophistiqué.