Animation de menu

JQuery

Sujet résolu

24 août 2010 à 23:26:39

Salut à tous !
Voici mon petit problème :
Je voudrais faire un menu avec JQuery, et lorsque l'on passerait sur un bouton, il y aurait un effet de hover, mais qui apparaisse progressivement. J'ai essayé de combiner .css() et .fadeIn() , mais ca ne marche pas

.Voici comment je procède : ( sans l'effet de fadeIn car il ne marche pas combiné à css )

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){


$("#menu #bouton").mouseenter(function(){
		$(this).css("background","url('boutonhover.png')");
});

$("#menu #bouton").mouseleave(function(){
		$(this).css("background","url('bouton.png')");
});


});
</script>
<style>
#bouton{width:120px;height:50px;background: url('bouton.png');}
</style>
</head>
<body>
<div id="menu">
<div id="bouton">
</div>
</div>
</body>
</html>

Voila, connaissez-vous une technique pour faire cet effet, mais qui marche ? ...

Merci de votre aide

Triviak

25 août 2010 à 1:06:01

Je vois pas du tout l'effet que tu veux faire...

A tout hasard, penche toi sur la méthode animate() qui permet de modifier des propriétés css avec du temps. Ca s'utilise pareil que css() sauf que l'on peut mettre du temps en deuxième paramètre.

Décrit bien ce que tu veux obtenir parce que c'est pas clair du tout. Ok pour le hover, mais après, tu veux quel "effet" exactement.

CTR*Seb

25 août 2010 à 1:39:21

Ok, je vais voir pour utiliser .animate()

Alors enfaite, je voudrais superposer 2 effets en même temps : un effet de fadeIn ( apparition en fondu ) et un effet de hover, donc un hover qui apparait petit à petit.

Mais je vais voir avec animate, ca me parait prometteur, merci

( je reste ouvert à tout conseil ! )

EDIT : Impossible d'utiliser ca :

Citation : JQuery

(For example, width, height, or left can be animated but background-color cannot be.)

Donc je ne peux pas animer l'affichage d'un bouton avec ca, il me faut autre chose

Triviak

25 août 2010 à 12:19:08

Non, tu peux quant même. Je pensais que tu utiliserais cette méthode pour copier l'effet fade (notamment avec les propriétés de transparence) mais effectivement, cette méthode ne fonctionne pas avec les couleurs.
En revanche, si c'est vraiment ce que tu veux faire, tu peux utiliser ce plugin pour activer cette fonctionnalité.

Citation

Adds the ability to do color animations to jQuery 1.2, and newer.

artragis

25 août 2010 à 12:37:34

Il y a pas aussi la fonction slideOut? enfin, je sais plus trop.

Des tutos surtout et gratuit|Déboguez php|Un cours sur ASP.NET MVC

CTR*Seb

25 août 2010 à 13:37:12

Ok, merci beaucoup, problème résolue !