Forum : Menu Sprit jQuery et hover

Bonjour,

Pour donner un effet de :hover plus fluide, a partir du moment ou JavaScript est actif sur les navigateurs,

Je pensais essayer un système comme celui ci...

$("#menu a.m_accueil").mouseover(function(){
      $(this).fadeIn(500, function(){
         $(this).css("background", "url(theme/menu.png) 0 96px");
         $(this).css("background-position", "0 96px");
      });
   });

Je passe par un systeme de sprites donc, un simple effet de backgroundPosition ne m'aide pas,
j'aurai vraiment voulu ce fadeIn sur la partie de l'image appropriée..

J'ai testé pas mal de code mais, je ne parviens pas a donner l'effet voulu (je cherche peut etre trop loin :) )

Si un spécialiste de jQuery peut me dire dans quel coin chercher, ce serait super gentil :)

(Le but, est évidement que, quand JavaScript n'est pas activé, que le "hover" du CSS fasse son boulot :) vive le JS non intrusif :) )

Merci d'avance :)

the_sheep

Réponse acceptée

bien sur que ça reste faisable :D

c'est juste mon "ergonomique"

ma technique a moi serait de mettre une autre div par dessus en absolute (visibility hidden) et tu le fadeIn au survol ....

agrafik

Salut,

Voilà ce que je peux te passer de l'ami Shaion :

http://shaion.me/background-anime-sur-un-menu.html

MrGuillou

regarde plutôt la
http://www.grafikart.fr/tutoriels/menu-anime-jquery-98

car même si le lien de @Xeron est un bon lien, il n'utilise pas stop() dans le script

et ça donne un menu qui devient foufou :)

agrafik

Tout en bas c'est écrit que tu peux l'ajouter ^^ .

MrGuillou

a oui pas vu :)
Mais rien ne vau un bon tuto Graphikart :)

ifabe

Auteur

En fait, j'ai déja regardé ce tuto,

mais, mon souhait ici, c'est de lancer un fadeIn mais, sur une partie d'un sprite
donc, en gros, mon background pour mon menu est en

background-position: 0 0;

et au survol, j'aimerai faire ce fadeIn sur le

background-position: 0 96px;

Est ce que ca reste faisable?

Merci :)

ifabe

Auteur

... Histoire de pas faire de JS "intrusif",

voir pour mettre la span en hidden via CSS et lui faire faire un fadeIn via jQuery..

Ca doit etre jouable comme ca aussi, en effet :)

mais, juste pour info, comment tu procèderai pour reprendre mon idée d'au dessus??
donc, un fadeIn sur un changement de backgroundPosition ? :)

Merci :)

the_sheep

ben a mon avis ça doit pas être possible :)
ou je créerai une très longue image ou j'imiterai un effet fadeIn avec des bloc de 30px(si la hauteur de on bloc est de 30 px ) et la déplacerai vers le haut de 30px toutes les 10 millisecondes (comme les bandes de cinéma )

mais ça augmente le boulot XD

ifabe

Auteur

Solution qui fonctionne avec le Display: none;
(j'ai testé le visibility: hidden, mais, sans résultat :) )

C'etait pas exactement la réponse a ma question mais une facon differente d'obtenir, visuellement, le meme résultat :)

Merci les gens :)

P.S.: Si un jour quelqu'un sait comment faire un fadeIn sur un code du style background-position: 0 96px;

Je suis preneur quand meme :)

Menu Sprit jQuery et hover

9 réponses