마우스를 가져 가면 확대 효과가 적용됩니다.

Question

링크가 거의없는 탐색 모음이 있습니다. 마우스를 가져 가면 링크가 확대됩니다 (크기 증가). 다른 링크가 각각의 위치에 있기를 바랍니다. 나는 이것을 위해 코드를 작성했다. 여기

는 HTML

이다

<ul> 
<li> <a href="#">Link 1 </a> </li> 
<li> <a href="#">Link 2 </a> </li> 
<li> <a href="#">Link 3 </a> </li> 
</ul> 

CSS 코드 여기

a { 
text-decoration:none; 
font-size: 15px; 
} 
ul { 
list-style-type:none; 
} 
li { 
display: inline; 
padding-left: 50px; 
} 

및 호버 효과 여기

$(function(){ 
    $('a').hover(function(){ 
     $(this).css({'z-index':'1','font-size':'30px'}); 
    }, 
    function(){ 
     $(this).css({'z-index':'0','font-size':'15px'}); 
    }); 
}); 

위한 JQuery와위한 jsfiddle 링크이다 상기 Demo

원하는 효과를 얻지 못하고 있습니다. 내가 놓친 게 무엇입니까? 이 확대/축소 과정에서 animate()를 사용하는 방법은 무엇입니까?

Answer 1

당신은 아주 쉽게 애니메이션을 적용 할 수 있습니다

:

$(function(){ 
$('a').hover(function(){ 
    $(this).animate({'z-index':'1','font-size':'30px'},50); 
     }, 
     function(){ 
     $(this).animate({'z-index':'0','font-size':'15px'},50); 
    }); 
}); 

예컨대 :

http://jsfiddle.net/m9tHb/1/

당신이 순간에이 일에 대해 다른 무엇을 좋아하지 않아?

정지 다른 링크 이동 :

내가 더 CSS 전문가도 아니다

하지만 리튬 요소의 폭을 설정하고 그들이 움직이지 않는 그들 (왼쪽에서 스택) 왼쪽 떠 가짐으로써 :

li { 
    padding-left: 50px; 
    width:100px; 
    float:left; 
} 

을

http://jsfiddle.net/m9tHb/3/

나는 그것을 할 수있는 많은 방법이 있다고 확신하지만, 요소의 크기를 변경하면 다른 것에 영향을주지 않을 것입니다. 예. 절대 위치 지정을 사용할 수 있습니다.

P. 단지 중심으로 리튬의 텍스트를 정렬하는 것이 더 좋은 보이게 것으로 확인)

text-align:center; 

jsfiddle :

http://jsfiddle.net/m9tHb/4/

EDIT : 절대 위치의 예 :

http://jsfiddle.net/m9tHb/5/