2011-11-26 6 views
3

데모 up here을 가지고 있으므로 관련된 모든 html과 javascript를 볼 수 있습니다.jQuery 탐색 메뉴 문제

문제 :

제가하는 데 문제는 그 순간에, 당신은 화면의 아무 곳이나 다른 마우스를 이동 한 후 (홈 제외) 및 링크 위에 마우스를 올려 때 (가정 이상을 제외하다 링크) 홈 링크가 흰색 텍스트 색으로 되돌아 가지 않습니다.

if (status == "off") 
{ 
$(this).stop().animate({ color: linkcol },500); 
} 

내가 여분의 라인을 추가 :

나는 (전체 코드를 보려면 페이지에 링크 된 "example.js"파일보기) 다음 코드 조각을 변경하여 문제를 해결하려
if (status == "off") 
{ 
$(this).stop().animate({ color: linkcol },500); 
$(".current_page_item_two a").stop().animate({ color: whitecol },500); 
} 

이 줄

는 더 링크가 마우스 커서를 올려 확인한되지 않은 경우 흰색으로 다시 current_page_item_two 요소 내부의 링크를 설정하도록 구성되었다 (시 홈 링크 슬라이더 반환).

그러나 데모 here을 보면 네비게이션에서 끔찍한 결함이 발생한다는 것을 알 수 있습니다. 링크를 마우스로 움직이면 무슨 뜻인지 알 수 있습니다. 결국 화이트 롤오버 애니메이션에 돈이 걸리는 문제가 발생합니다. 전혀 작동하지 않음)

또한 애니메이션이 완료되기 전에 호버 사각형을 애니메이션화 할 때 내 콜백 함수가 왜 호출됩니까? 저는 jquery에 익숙하지 않았습니다. 그리고 네 번째 매개 변수는 애니메이션이 완료되었을 때 호출되는 함수라는 인상하에있었습니다.

감사합니다.

+0

StackOverflow는 못생긴 HTML 태그 및 문자 코드없이 텍스트 서식을 지정하는 Markdown을 지원합니다. 귀하의 질문을 다시 형식화했습니다. – pimvdb

+0

감사! 나는 다음 번에 그것을 기억할 것이다. – nmford

답변

1

코드가 불필요하게 복잡합니다. 매우 간단한 jQuery 플러그인으로 당신이 원하는 것을 리팩터링했다. 원한다면 css3 애니메이션을 조사하여 크로스 브라우저 호환을 유지하려는 경우에도 더 작게 만들 것을 권장합니다. 코드는 아직 필요 이상으로 복잡하지만, 그만큼 시간이 많이 걸리지 않기 때문에 더욱 그렇습니다. 당신이 어떤 질문을 물어 주시기있는 경우 가정 및 슬라이더 폭

변화에 재설정 슬라이더를 추가하는 업데이트 URL :

http://jsfiddle.net/hGm7M/3/

편집 : 당신은 여기에 솔루션을 볼 수 있습니다.

주 :

  • 당신은 jQuery 플러그인으로 모든 CSS를 움직일 수 그것을 자신을이 경우에 나는 경우 확실하지 않지만
  • 당신은, 컬러 시스템에서 슬라이더를 분리 할 수있는 위젯 포함 그것의 가치가있다
  • 지금 나는 단순함을 위해 CSS에서 색을 설정하지 않는다. 즉, 자바 스크립트가없는 브라우저는 기본 색칠 된 링크를 얻는다. 이것에 대한 해결책이 많이 있지만, 당신이하고 싶은 일에 달려 있습니다. 위젯 스타일을 선호하는 경향이있어서 클라이언트에게 HTML 메뉴를 제공하고 으로 바꾸고 js 위젯을 모든 스타일링으로 바꿉니다. 이 방법을 사용하면 품위가 떨어지지 만 코드는 여전히 간단하고 까다 롭습니다.
+0

잠깐, 방금 홈 링크로 다시 기본 설정하지 않았 음을 알았습니다. 지금 고치고있어. –

+0

확인이 완료되면 최종 제품에 대한 새 URL http://jsfiddle.net/hGm7M/3/을 확인하십시오. –

+0

감사합니다. Carl! 당신은 매우 유용했으며 제 문제를 해결할 수 있도록 도움을주었습니다. 나는 그 과정에서 몇 가지 것을 배웠습니다. – nmford