2010-06-03 3 views
0

jQuery를 사용하여 가로형 탭 메뉴에 애니메이션을 적용하는 웹 사이트를 구축하고 있습니다. 내가 여기에 볼 수 있습니다 달성하고자하는 것 : 당신은 /는 "링크 1"탭 마우스를 움직일 놓으면jQuery 메뉴 애니메이션

/링크/

을 제거, 당신은 흰색 사업부가 확대되고 있음을 볼 수 있습니다. 각 탭 메뉴 항목은 스타일이 지정된 li 태그입니다. 사용자가 마우스를 올리거나 마우스를 올리면 '링크 2'탭에서 흰색 div가 축소되어 '링크 1'대신 '링크 2'와 관련된 콘텐츠로 다시 펼쳐집니다. 또한 기본적으로 '링크 1'탭이 확장되어야합니다 (즉, 사이트에 방금 들어 왔을 때)

이 중 jQuery 닌자가이 작업을 수행하는 방법을 알고 있습니까? 현재 내가 가진 것은 다음과 같습니다.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var $div = $('#divtest'); 
     var height = $div.height(); 
     $div.hide().css({ height : 0 }); 

     $('#forside').hover(function() { 
      if ($div.is(':visible')) { 
       $div.animate({ height: 0 }, { duration: 200, complete: function() { 
        $div.hide(); 
       } }); 
      } else { 
       $div.show().animate({ height : height }, { duration: 200 }); 
      } 

      return false; 
     }); 
    }); 
</script> 

모든 마우스 오버시 확장/축소가 필요한 4 개의 div가 필요합니까?

내가 내 문제가 무엇인지에 대한 명확한 없다는 해요 경우, 그렇게 말 나는 사전에 :)

감사를 정교하게 노력하겠습니다!

+0

이 드롭 다운에 중요한 콘텐츠가 표시됩니까? 나는 심각하게 자바 스크립트와 함께 버전을 만들기 전에 자바 스크립트없이 작동 버전을 만드는 것이 좋습니다. –

+0

안녕하세요, Bryan, 빠른 의견에 감사드립니다. 아니, 중요한 일은 아무 것도 없습니다. 일부 티저 - 텍스트 및 이미지 및 더 많은 것 :) 나는 jQuery와 함께 작동하도록 노력하고있다. 현재 웹 사이트는 여분의 프로젝트와 같아서 마감 시간이 거의 없습니다.) – bomortensen

답변