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

使用圖像拼接和background-position只要做到這一點在CSS。這將切斷所有的jQuery。

Answer 2

你可以跳過1個循環：

$(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

但我同意以及與安德魯孔雀，我會用在精靈相同的動畫，留下相同的文本和不斷變化的只是背景位置。所以你會跳過1個循環來克隆文本

Answer 3

我沒有發現你的代碼複雜或不優雅。
但是，如果你想要一個不同的方法，你可以嘗試css3動畫。
Here is a live example你的效果沒有js。
希望它有幫助。