jQuery 动画底部填充

Question

我有另一个关于我的 jQuery 脚本的初学者问题。我有一个脚本可以让菜单向右移动一点。第一期是 <a>以某种方式获得底部填充，我不知道为什么以及如何。第二个问题是如何填写整个 <td>与 <a>元素。我是 jQuery 的初学者，正在寻找一些学习方法，所以请耐心等待。非常感谢您的回答。

jQuery 代码:

$(document).ready(function(){
    $('.menu a').hover(function(){
        $(this).stop().animate({width: '180px'}, "slow");
    }, function(){
        $(this).stop().animate({width: '160px'}, "slow");
    });
});

jsFiddle 演示:Here

Answer 1

您不应该为菜单使用表格。绝对没有理由这样做。请改用无序列表，例如:

<ul id="menu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
</ul>

然后您可以将其样式设置为:

#menu {list-style-type: none; margin:0;padding:0;}
#menu > li {background: #8B0B04;width: 160px;padding: 7px 30px 7px 0px;}
#menu a {color: #A9A582;text-decoration: none; font: 17px bold Helvetica;width: 100%; height: 100%}

关于你的第二个问题，我不太清楚你的意思？ (:

编辑:

哦，还有 jquery，您可以将其更改为:

$(document).ready(function(){
    $('#menu > li').hover(function(){
        $(this).stop().animate({width: '180px'}, "slow");
    }, function(){
        $(this).stop().animate({width: '160px'}, "slow");
    });
});

现在通过编辑我明白了你的第二个问题。我做了一个 fiddle :

http://jsfiddle.net/k8vsA/