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 효과없이 j가 전혀 없습니다.
희망이 있습니다.