jQuery help with hover

Question

어이 이상한 이유가 있습니다.이 기능을 사용할 수 없습니다. hover에 대한 간단한 효과가 필요합니다. 링크를 클릭하면 패딩 왼쪽이 특정 픽셀로 바뀝니다. ..

jQuery("nav li ul li").hover(function() { 
    var padding = parseInt(jQuery(this).find("> a").css("paddingLeft"); 
     var new_padding = (padding + 5); 
    jQuery(this).find("> a").stop(true,true).animate({ paddingLeft: new_padding},200); 
    }, function() { jQuery(this).find("> a").animate({ paddingLeft: padding},200);} 
); 

난 그냥 원래보다 5 패딩이 왼쪽으로 이동 말할 때 마우스 밖으로 원래로 다시 이동하려고 따라서 위. 는

감사합니다 ... 모든

Answer 1

jQuery에서 + = 및 - = 애니메이션 기능을 사용하여 패딩에서 일정량을 추가하고 제거하는 것이 좋습니다. 그렇게하면 패딩 값을 실제로 가져 오거나 변수를 추적하지 않고도 모든 것을 훨씬 간단하게 처리 할 수 ​​있습니다. 예제는 을 참조하십시오. 이것을 사용하면 더 이상 필요하지 않으므로 new_padding 변수의 범위 지정 문제도 해결됩니다.

그러면 필자는 find (">")가 반드시 원하는 것을하고 있다고 생각하지 않습니다. 만약 당신이 방금 넘겨받는 nav li ul li의 자식 인 "a"태그를 찾으려면 find ("a")를 수행해야합니다. 그러면 첫 번째 호출에서 "a"태그 인 모든 성냥 선택기의 하위 항목을 찾을 수 있습니다.

jQuery("nav li ul li").hover(
    function() { 
     jQuery(this).find("a").stop(true,true).animate({paddingLeft: "+=5"},200); 
    }, 
    function() { 
     jQuery(this).find("a").stop(true, true).animate({paddingLeft: "-=5"},200); 
    } 
); 

당신이 코드의이 데모에서 여기에서 일을 볼 수 있습니다 :

난 당신이 뭔가를 사용할 수 있다고 생각 코드를 실행하지 않고 http://jsfiddle.net/jfriend00/9YQaV/

Answer 2

먼저, 당신에게없는 게 .. 내가 뭔가를 간단 말이냐 알고 ... 위의 패딩 오른쪽으로 이동 유지하고 어떤 이유로 돌아 가지 않는다 여기 닫는 괄호 :

var padding = parseInt(jQuery(this).find("> a").css("paddingLeft"); 

하고 항상가 radix 인수 parseInt에 제공해야합니다 :

var padding = parseInt(jQuery(this).find("> a").css("paddingLeft"), 10); 

그런 다음 padding의 범위 문제가 있습니다. 첫 번째 함수 인수에서 padding을 hover으로 선언했지만 첫 번째 함수와 두 번째 함수에서 모두 사용하려고합니다. 결과는 padding이 정의되어 있지 않기 때문에 mouseout 함수의 animate이 아무 작업도 수행하지 않는다는 것입니다.

당신이 당신의 호버 기능을 외부 var padding; 넣을 경우

var padding; 
jQuery("nav li ul li").hover(//... 

당신은 얻을 것이다 더 나은 결과를.

Answer 3

, 나는 추측거야 두 번째 함수는 오류를 던지고 결코 실행되지 않습니다. 첫 번째 함수에서 로컬 변수로 padding을 정의했지만 두 번째 함수는 이에 대해 알지 못합니다. 해당 범위에서 padding을 찾고, 찾지 않으며, 전역 범위에서 찾아서 찾지 않으며 예외를 throw합니다. 내가 옳다 경우

화재 최대 Firebug 파이어 폭스에서 볼 수 ... 나는 경우에, 당신은 몇 가지 옵션을 가지고 :

1. 이 padding 글로벌하십시오.선언의 일부인 var을 제거하면이 작업을 수행 할 수 있습니다. 그러나 전역 변수는 다소 스케치 적이므로 예상 된 순서 (in1 -> out1 -> in2 -> 등)로 호출되는 함수에 의존하게됩니다. 그럴 가능성은 있지만 보장 할 수는 없습니다.
2. 각 기능의 요소에서 margin 속성을 다시로드하십시오. 이것은 터치가 덜 효율적이라 할지라도 내가 할 수있는 것입니다.

(차단기 라인은이 형식을 SO 강제로 ...)이 도움이

$("nav li ul li").hover(
    function() {$(this).find("> a").animate({ paddingLeft: load_padding() + 5}, 200);}, 
    function() {$(this).find("> a").animate({ paddingLeft: load_padding() - 5}, 200);} 
) 

희망을!

PS : 희망 그 코드 형식 괜찮 - 미리보기의 도살이 ...

PPS : 그것은하지 않았다,하지만 난 그것을 알아 냈다.