Навигационная анимация |Не удается получить только элемент списка для анимации - PullRequest
Новая
       15

Навигационная анимация |Не удается получить только элемент списка для анимации

0 голосов
/ 09 июня 2011

У меня есть небольшая проблема, которую я не могу понять для своей жизни.Может быть, потому что сейчас час ночи, и я устал, но я все равно спрошу, рискуя выглядеть как идиот.У меня есть этот код

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 (), кажется, выбирает каждую ссылку.Вы можете мне помочь?

Ответы [ 2 ]

0 голосов
/ 10 июня 2011

Я понял это.Сначала мне нужно было добавить ширину к моей навигации.Я дал ему ширину 150px в CSS, а затем изменил JS на 

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

. Вы можете посмотреть мой новый jsfiddle здесь http://jsfiddle.net/uNQdE/1/

0 голосов
/ 09 июня 2011

Как насчет простого изменения значений отступа влево / вправо для элемента, по которому щелкнули мышью? 

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 Пример

...