제이쿼리 애니메이션질문이요

제이쿼리 애니메이션질문이요

QA

제이쿼리 애니메이션질문이요

본문

다시 정리해서 올리자면요

<div id="menu">

      <ul>

              <li><a href="#">메뉴1</a></li>

              <li><a href="#">메뉴2</a></li>

              <li><a href="#">메뉴3</a></li>

              <li><a href="#">메뉴4</a></li>

      </ul>

      <div id="line"></div>

</div>

#line  {border-bottom:3px solid #000; }

이렇게 있어요

여기서  메뉴4에서 호버할경우 #line를 이용해서 좌측에서 우측으로 이동하려고요 

그러고 호버를떼면 좌측으로 복귀하게 만들려고요

애니메이션으로 하는법을 모르겠어요 알려주실분있나요

이 질문에 댓글 쓰기 :

답변 3

#line 은 width 100% 의 가로 라인인거 같은데..

" #line를 이용해서 좌측에서 우측으로 이동하려고요  " .. 애매하네요.

무엇을 어디에서 어디로 이동시키려는것인지...

 

현재 어떻게 출력되는 상태에서 무엇을 어떻게 하길 원하는지..

기대하는 효과가 정확히 무엇인지 설명을 해주셔야..

 

최대한 자세히 설명을 하시고, 설명이 어렵다면 이미지를 캡쳐해서라도 알려주셔야 상황 이해가 될듯합니다.

아마 ul 로 구성된 서브메뉴 에서 사용하시려고 하시는것 같습니다.

헌데 조금만 구글링으로 해도 충분히 나올수 있는 소스 입니다.

 

<script type="text/javascript">

$('.test').hover(function() { // test 클래스 hover 시

$(this).animate({left:200},1000); // 본(test) 객체의 애니메이션 왼쪽으로200증가 1초

}, function(){

$('.test').animate({right:200},1000)).fadeOut(1000); // 다시 복귀

});

</script>

답변을 작성하시기 전에 로그인 해주세요.
전체 123,165 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT