Question

我有一个小问题，我无法弄清楚我的生活。也许它是因为它凌晨1点而且累了，但是不管怎样我还是会冒着看起来像个白痴的风险。我有这个代码

HTML：

<style>
nav.main ul {
 font-size:175%;
 font-weight:300;
 text-align:right;
 }
nav.main ul li {
 padding-bottom:20px;
 }
nav.main ul li a {
 padding:5px 5px 5px 100%;
 background:#000;
 margin-left:-80%;
 }    
</style>

<nav class="main">
 <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#port">Portfolio</a></li>
  <li><a href="#team">Team</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

JS

$(document).ready(function() {

var navHome = $("nav.main ul li a[href=#home]");

navHome.click(function() {
$(this).animate({paddingLeft:'125%'});
 });
});

我只想让我点击的链接动画到左侧，但是当我点击一个链接时，它们都会生成动画。我不明白发生了什么。我可以使用相同的选择器设置css颜色，但animate（）似乎选择了每个链接。你能救我吗？

Answer 1

如何更改点击元素的填充左/右值？

var navHome = jQuery("nav.main ul li a[href='#home']");
navHome.click(function() {
    jQuery(this).animate({
        'padding-left': jQuery(this).css('padding-right'),
        'padding-right': jQuery(this).css('padding-left')
    });
});

jsFiddle Example

Answer 2

我已经弄清楚了。首先，我需要为导航添加宽度。我在CSS中给它宽度为150px然后我把JS改成了这个

navHome.click(function() {
$(this).parent().animate({width:'250px'});

您可以在http://jsfiddle.net/uNQdE/1/

查看我的新jsfiddle

导航动画|无法仅获取要设置动画的列表项

2 个答案: