반응형

jQuery로 메뉴에 효과 주기

 

<HTML>

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
<div>
    <ul class="hover">
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
        <li>메뉴4</li>
        <li>메뉴5</li>
        <li>메뉴6</li>
    </ul>
</div>

 

<jQuery> 1번 효과

 

1
2
3
4
5
 
$('.hover li').hover(function(){
	$(this).animate({paddingLeft: '+=15px'},200);
}, function(){
	$(this).animate({paddingLeft: '-=15px'},200);
});

 

 

<실행1>

 

 

마우스를 메뉴4에 올려두면 메뉴가 오른쪽으로 밀린다.

 

 

 

 

<jQuery> 2번 효과

 

1
2
3
4
5
 
$('.hover li').hover(function(){
	$(this).animate({fontSize: '+=15px'},200);
}, function(){
	$(this).animate({fontSize: '-=15px'},200);
});

 

 

<실횅2>

 

 

효과를 폰트사이즈로 두어서 메뉴3이 커지는 효과를 줄수있다.

반응형
저작자표시 비영리 변경금지

'Computer Language > Jquery' 카테고리의 다른 글

jQuery toggle(토글) 버튼  (0) 2017.07.29
jQuery (제이쿼리) 사용법  (0) 2017.07.28

+ Recent posts

티스토리툴바