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動畫底部填充

回答

相關問題