jQuery backgroundPosition Les sprints css ne fonctionnent pas ensemble?

J'ai commencé à faire un portfolio web pour mes photos. Je ne suis pas designer web, ça m'intéresse tout simplement. Voici la page: http://jsfiddle.net/RhjJZ/1/ dans jsfiddle. J'ai fait des sprites CSS pour rendre l'arrière-plan pour les liens <a>. Je veux qu'ils changent lorsque la souris est sur eux donc j'ai fait ce script avec jQuery et ça a l'air de marcher, je ne peux pas m'imaginer pourquoi, essayé de beaucoup de façons différentes ... j'ai cherché beaucoup de problèmes similaires sur le Internet mais ils ne pouvaient pas m'aider. Si quelqu'un a signalé ce que j'ai fait de mal, je serais très heureux! et ma photo pour le menu est une 1x296 px.jQuery backgroundPosition Les sprints css ne fonctionnent pas ensemble?

Source

2013-02-28 godzsa

Où est le paramètre 'val' vient? –

onmouseover() à partir de HTML. – godzsa

Pouvez-vous ajouter un 'menu.png' au violon? –

Le problème est que votre fonction menu() n'est pas dans la portée normale à cause de jQuery, donc vous obtenez l'erreur Javascript: menu(xx) is not a function.

La solution consiste à définir ces valeurs codées en dur à l'aide du schéma d'attribut de préfixe data-, puis à gérer les événements mouseover et mouseout avec jQuery.

HTML:

<body> 
    <header id="menu"> 
      <h1>dawe's portfolio</h1> 

     <nav> <a id="m_portf" data-one="0" data-two="-37" href="#portfolio" 
      width="1px">portfolio</a> 
    <a id="m_music" data-one="-72" data-two="-111" 
      href="#music">music</a> 
    <a id="m_about" data-one="-148" data-two="-185" 
      href="#about">about</a> 
    <a id="m_contact" data-one="-222" data-two="-259" 
      href="#contact">contact</a> 

     </nav> 
    </header> 
</body>

Javascript:

$('a').on('mouseover',function(){ 
    $(this).animate({'background-position': '0px ' +$(this).attr('data-one')+'px';}, 1500); 
}); 

$('a').on('mouseout',function(){ 
    $(this).animate({'background-position': '0px ' +$(this).attr('data-two')+'px';}, 1500); 
});

Source

2013-02-28 18:24:31

alors je dois écrire mouseover et mouseout détection dans jquery pour chaque '' séparément? – godzsa

J'ai accidentellement collé le mauvais javascript. Pour répondre à votre question, non. –

wow merci pour votre aide! – godzsa

jQuery backgroundPosition Les sprints css ne fonctionnent pas ensemble?

Répondre

Questions connexes