제이쿼리 애니메이션질문이요
본문
다시 정리해서 올리자면요
<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
css로 충분히 구현가능합니다 .
이미지로 다시 그려 첨부해보세요
#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>