Как анимировать элементы li с небольшой задержкой между

Question

Я хотел бы, чтобы каждый элемент li перемещался по экрану один за другим с небольшой задержкой между ними.

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

Вот что я до сих пор:

$("#navright ul li:nth-child(1)").animate({marginLeft:'115px'},500).delay(150); 
$("#navright ul li:nth-child(2)").animate({marginLeft:'115px'},500).delay(150);  
$("#navright ul li:nth-child(3)").animate({marginLeft:'115px'},500).delay(150); 
$("#navright ul li:nth-child(4)").animate({marginLeft:'115px'},500); 

Answer 1

В основном то, что вы ищете дипломированные задержки. Это лучше выполняется с помощью цикла (в моем примере будет использоваться метод jQuery .each()). Общая концепция заключается в том, чтобы увеличить задержку контролируемым образом. Мой комментарий выше работает для текущего 4, но, как правило, не является хорошим подходом с точки зрения масштабирования. Это создает почти экспоненциальное увеличение сверхурочной работы. В моем примере ниже приведена общая задержка плюс две трети этой начальной задержки в качестве фактора, с помощью которого задержка увеличивается с течением времени. Единственная реальная проблема с вашим исходным кодом заключается в том, что вам нужно позвонить до .delay(), чтобы произойти до вызова .animate(). Ниже приведен мой обновленный пример.

демо: http://jsfiddle.net/xcvc2uwm/1/

var d = 150, factor = d/3 * 2; // increment delay by two thirds original delay 
 
$("#navright ul li").each(function(){ 
 
    $(this).delay(d = d + factor).animate({marginLeft:'115px'},500); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="navright"> 
 
    <ul> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
    </ul> 
 
</nav>

Надеется, что это помогает.