導航動畫|不能只獲得動畫列表項目

我有一個小問題，我無法弄清楚我的生活。也許是因爲它的凌晨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

導航動畫|不能只獲得動畫列表項目

回答

相關問題