jQuery code gonflé possible

Question

Je jetais ensemble une barre de navigation animée avec jQuery et il semble que beaucoup de js pour ce que je cherche à accomplir, quelqu'un sait d'une solution plus élégante pour cet effet?

Site en direct:

http://daveywhitney.com/nav/2/

jQuery

$(document).ready(function() { 

    $("#topnav li").prepend("<span></span>"); 

    $("#topnav li").each(function() { 
     var linkText = $(this).find("a").html(); 
     $(this).find("span").show().html(linkText); 
    }); 

    $("#topnav li").hover(function() { 
     $(this).find("span").stop().animate({ 
      marginTop: "-45" 
     }, 250); 
    } , function() { 
     $(this).find("span").stop().animate({ 
      marginTop: "0" 
     }, 250); 
    }); 

}); 

Answer 1

Il suffit de le faire en utilisant CSS sprites et background-position. Cela couperait tout le jQuery.

Answer 2

vous pouvez sauter 1 boucle:

$(document).ready(function() { 

    $("#topnav li").html(function(){ 
     var $obj= $(this); 
     $obj.prepend('<span>'+$obj.find('a').html()+'</span>'); 
    }); 



    $("#topnav li").hover(function() { 
     $(this).find("span").stop().animate({ 
      marginTop: "-45" 
     }, 250); 
    }, function() { 
     $(this).find("span").stop().animate({ 
      marginTop: "0" 
     }, 250); 
    }); 

}); 

Click Here

Mais je suis d'accord aussi bien avec Andrew Peacock, j'utiliser la même animation dans sprites, en laissant le même texte et en changeant juste fond position. Donc, vous allez passer une boucle de plus pour cloner le texte

Answer 3

Je ne trouve pas votre code compliqué ou non-élégant du tout.
Cependant, si vous voulez une approche différente, vous pouvez essayer les animations css3.
Here is a live example de votre effet sans js du tout.
J'espère que ça aide.