导航动画|不能只获得动画列表项目

我有一个小问题，我无法弄清楚我的生活。也许是因为它的凌晨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（）似乎选择每个链接。你可以帮我吗？

来源

2011-06-09 Devender

'paddingLeft'不是CSS属性但除此之外，和事实上，“填充左侧”并不会真正改变右对齐的文本，这对我很有用（我使用'padding'作为动画）。 – Lazarus 2011-06-09 08:35:26

您发布的CSS可能不完整，您可以在jsfiddle.net上创建测试用例吗？我的猜测是，你只能看到剩下的动画，因为你有文本右对齐，你的动画正在调整父容器的大小。 – DarthJDG 2011-06-09 08:37:44

Lazarus是对的，试试这个'$（this）.animate（{'padding-right'：'125％'}）;如果左对齐，填充左边会起作用 – Sparkup 2011-06-09 08:38:04

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

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

来源

2011-06-09 09:24:20 mayrs

不能回答我自己的问题6个小时，但我已经知道了。首先我需要添加一个宽度到我的导航。我在CSS中给了它150px的宽度，然后我将JS更改为这个 navHome.click（function（）{（this）.parent（）。animate（{width：'250px'}）; 你可以在这里查看我的新jsfiddle http://jsfiddle.net/uNQdE/1/ – Devender 2011-06-09 09:38:37

我已经想通了。首先我需要添加一个宽度到我的导航。我给它的宽度为150px在CSS然后我改变了JS这个

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

您可以查看我在这里新的jsfiddle http://jsfiddle.net/uNQdE/1/

来源

2011-06-10 19:08:25 Devender

导航动画|不能只获得动画列表项目

回答

相关问题