jQueryの可能性のある膨大なコード

Question

私はjQueryでアニメーション化されたnavbarを一緒に投げていました。これは私が達成しようとしている多くの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なしです。
希望します。