放大鼠标悬停效果

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;
}

这里是悬停效果的jquery

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

这是上面Demo的jsfiddle链接

我没有得到想要的效果。我错过了什么？以及如何在这个缩放过程​​中使用 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 元素的宽度并让它们向左浮动（从左侧向上堆叠），它们不会移动：

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

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

虽然我确信有很多方法可以做到这一点..你只是想确保改变元素的大小不会影响其他任何东西..例如你可以使用绝对定位。

附：刚刚注意到将 li 中的文本居中对齐使它看起来更好;)

text-align:center;

jsfiddle:

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

编辑：和绝对定位的例子：

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