2012-07-23 3 views
-1

Je ne sais pas comment appeler l'effet car je ne comprends pas la différence quand vous dites javascript ou jquery. Je ne peux rien faire. Donc, je fais un menu en html/css et je veux faire un effet de fondu lors du survol du menu. Je ne suis pas sûr si une telle chose existe, mais j'ai trouvé quelques exemples qui sont en quelque sorte, mais pas exactement ce dont j'ai besoin.jquery image hover transition/fondu?

http://greg-j.com/static-content/hover-fade.html

http://www.jacklmoore.com/blend

Dans les deux choses il y a l'effet que je veux, mais il y a des éléments/boutons avec une partie normale et vol stationnaire. Ce que j'ai n'est que l'état stationnaire :) Il s'agit donc essentiellement d'une image en tant qu'arrière-plan du menu et d'une autre image pour un état stationnaire.

Y a-t-il une chance de faire cet effet de fondu «apparaître/disparaître» avec une seule image utilisée pour (planer) ou il doit y avoir un état normal et stationnaire pour le faire fonctionner?

+0

Vous voulez un bouton qui n'apparaît que lorsque la souris entre ir et disparaît quand la souris s'éteint? – davidbuzatto

+0

Eh bien j'ai eu ce bouton mon pote ... Je veux juste que le bouton apparaisse instantanément et pars, apparaisse et parte doucement comme un fadeIn, effet fadeOut ... :) – dvLden

+0

Comme un effet de clignotement? – davidbuzatto

Répondre

2

Vérifiez la transition CSS3.

Voici quelques CSS pour fondre un élément en vol stationnaire.

.fade 
{ 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

.fade:hover 
{ 
    opacity: 0.5; 
} 

Il vous suffit de donner votre élément de la classe .fade comme ceci:

<p class="fade">This is my text element that will fade when you hover over it.</p> 

Bien qu'il ne doit pas être texte - il peut être un bouton, une image, etc.

Tiré de http://bavotasan.com/2011/a-simple-fade-with-css3/

+0

+1 Mais manque de support du navigateur IE, je crois. – Muhd

+0

Eh bien, je le savais déjà ... Havent pensait que cela pourrait effectivement fonctionner pour cette affaire. Merci mec. Problème résolu. – dvLden