Très nouveau pour jquery - pourquoi ça ne marche pas?

Je veux simplement déplacer le .icon vers la droite. essayer d'animer .icon par la quantité de position(). leftTrès nouveau pour jquery - pourquoi ça ne marche pas?

Mon code ne fonctionne pas et je ne sais pas pourquoi. Je parie que c'est très simple !!

<script> 
$("li.menu-item").hover(function(){ 
    var pos = $(this).position().left; 
    $(".icon").animate({left : pos+'px'}, 1500); 

}); 
</script> 




</head> 
<body> 


<div id="menu-wrapper"> 
<ul id="main-nav"> 
<li class="menu-item"><a href="">Blog</a></li> 
<li class="menu-item"><a href="">Sponsored</a></li> 
<li class="menu-item"><a href="">Facebook</a></li> 
<li class="menu-item"><a href="">Twitter</a></li> 
<li class="menu-item"><a href="">About</a></li> 
<li class="menu-item"><a href="">Contact</a></li> 
</ul> 

<div class="icon">move please</div> 

</div><!-- //END menu-wrapper --> 
</body>

css

#menu-wrapper { position: fixed; bottom: 50px; margin: 0 auto; text-align:center;} 

.icon { 
    width: 9px; 
    height: 9px; 
    background: url(../images/plus-menu.png) no-repeat 0 0; 
    position: absolute; 
    left: -5px; 
    bottom: -4px; 
} 

#main-nav { line-height: 1.0; float: left; margin-bottom: 1em; } 

#main-nav{list-style: none;} 

#main-nav li a { 
    display: block; 
    position: relative; 
    text-decoration: none; 
    margin-right: 20px; 
    color: #b2b2b2; 
    line-height: 19px; 
    padding-bottom: 17px; 
} 

#main-nav li { float: left; position: relative; } 

#main-nav li a:hover, #main-nav li a:active { color: #404040; }

Toute aide sera grande

Merci

Source

2011-10-03 user975909

Hum. Avec un minimum de modifications (stop() ping l'animation sur chaque nouvel événement hover, donc les choses ne sont pas chaînées), il semble fonctionner en this fiddle.

Source

2011-10-03 00:21:56 vzwick

Excellent. J'ai juste commencé à utiliser jquery yesturday !!! bonne aide – user975909

Wow, vous faites honnêtement super! – vzwick

Enveloppez votre code dans $(document).ready()

<script> 
$(document).ready(function() 
{ 
    $("li.menu-item").hover(function(){ 
     var pos = $(this).position().left; 
     $(".icon").animate({left : pos+'px'}, 1500); 

    }); 
}); 
</script>

Cocher cette beginner tutorial out pour plus d'informations

Source

2011-10-03 00:20:00 Terry

Damn. Je ne me suis même pas rendu compte que l'événement prêt était manquant. À votre santé! +1 – vzwick

Salut merci pour cela, mais cela n'a toujours pas fonctionné Je ne peux pas voir où je me suis trompé. Est le code ok/ – user975909

Très nouveau pour jquery - pourquoi ça ne marche pas?

Répondre

Questions connexes