jQuery动画底部填充

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

jQuery代码：

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

的jsfiddle演示：Here

来源

2013-04-21 albru123

我没有注意到你的提琴底部填充和有点困惑你的第二个问题 – bipen 2013-04-21 13:19:17

@ albru13你的标签不是你的问题出。接受我的编辑。 – 2013-04-21 13:21:18

你不应该使用一个表的菜单。这绝对没有理由。使用无序列表来代替，如：

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

而且随着现在编辑我明白你的第二个问题，我做了一个小提琴：

http://jsfiddle.net/k8vsA/

来源

2013-04-21 13:20:23 jah

这很好，但切换到表的原因是，我可以有一些表格行之间的空间，不知何故边界属性不会为我工作，现在它是惊人的。感谢你！ – albru123 2013-04-21 13:45:34

Your'e welcome（：如果你想在菜单项之间留出空白，你只需要在“li”上放一个空白底部，如：#menu> li {background：＃8B0B04; width：160px; margin-bottom：5px; } – jah 2013-04-21 13:49:11

jQuery动画底部填充

回答

相关问题