jQuery animate next div

Question

Я пытаюсь анимировать div внутри элемента списка с помощью события click, но не могу понять, почему код не работает?

Он работает, когда я указываю прямой путь к div, но я хочу сохранить сценарий, чтобы он не использовал определенные классы.

$('#home ul.circles li').click(function() { 
    $(this).next('div').animate({opacity: 0.8, top:'0'}, 1500); 
}); 

HTML

<ul class="circles"> 
     <li class="c-1"><div class="c-1-active">Text Link</div></li> 
     <li class="c-2"></li> 
     <li class="c-3"></li>        
</ul> 

Я пытаюсь обратить эффект, но не могу показаться, чтобы сохранить путь к вар?

$('#home ul.circles li').click(function() { 
    alert(testing); 
    if(testing > "" || testing == $(this).find('div')) 
    { 
     testing.animate({opacity: 0, top:'180px'}, 1000); 
    } 
     $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000); 
     var testing = $(this).find('div'); 

}); 

Answer 1

Разделитель находится внутри элемента li. Вместо этого используйте .find(..).

Answer 2

Заменить:

$(this).next('div').animate({opacity: 0.8, top:'0'}, 1500); 

С:

$(this).parent().find('div').animate({opacity: 0.8, top:'0'}, 1500); 

Или:

$(this).find('div').animate({opacity: 0.8, top:'0'}, 1500); 

Зависит от того, что вы хотите достичь.

div не является родным братом любого из li, но ребенок одного из них.

Answer 3

Там может быть много проблем, как -

• Вы не сохранили свой код в $ (документ) .ready (п);
• Элемент (div), который вы пытаетесь оживить, не имеет положения: относительного или абсолютного на нем.
• Вы также можете поэкспериментировать с заданием начальной непрозрачности для div.

Создана ссылка jsfiddle, что вы хотите помочь.
jsfiddle

Answer 4

Вы можете использовать '>' в селекторе, чтобы выбрать прямых детей элемента li. Это позволит выбрать только div. Есть ли другой div внутри div, он не будет выбран:

$('#home ul.circles li').click(function() { 
    $(this).find('>div').animate({opacity: 0.2, top:'0'}, 1500); 
});​​​​​​​​​​​