jQuery 可能的臃肿代码

Question

我正在用 jQuery 组合一个动画导航栏，它看起来像很多 js 来实现我想要完成的事情，有人知道更优雅的解决方案吗？

实时站点:

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

只需在 CSS 中使用图像 Sprite 和 background-position 即可。那会切断所有的 jQuery。