Menu Sprit jQuery et hover

Ce sujet est résolu
5654
,

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 :)

9 Réponse

Default
,

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 ....

1741
,

Salut,

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

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

Default
,

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 :)

1741
,

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

Default
,

a oui pas vu :)

Mais rien ne vau un bon tuto Graphikart :)

5654
,

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 :)

5654
,

... 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 :)

Default
,

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

5654
,

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 :)