Функция обратного вызова после анимации элементов списка

Question

У меня есть затухание анимации в (fadeIn()) Список элементов в неупорядоченном списке. У меня много работы, но я хочу вызвать другую функцию после того, как все элементы списка видны - я предполагаю, что это будет функция обратного вызова.

В принципе, после того, как мои 6 элементов списка исчезли, я хочу исчезнуть на границе между ними. Это оно! Просто имея проблемы с размещением функции обратного вызова, я продолжаю получать ошибки, где, я думаю, функция должна идти.

Заранее спасибо за любую помощь

HTML код:

<header> 
    <nav> 
    <ul> 
     <li>interior</li> 
     <li>exterior</li> 
     <li>apartments</li> 
     <li>homes</li> 
     <li>garages</li> 
     <li>rooms</li> 
    </ul> 
    </nav> 
</header> 

Javascript код:

<script type="text/javascript"> 
$(document).ready(function() { 
    var currentItem = null; 
    var speed = 1000; //Speed of animation 
    var gap = 700; //The delay between each list item fadeIn 

    function showItemBorders() { 

     $('ul li').css('border-left', 'border-left:1px solid #333').fadeIn('slow'); 

    } //My function that should be used as a callback when list items are finished 

    function doNext() { 
     if(currentItem==null) { 
      currentItem = $('ul li:first'); //Get the first List Item 
     } 
     else if(currentItem.next().length!=0) { 
      currentItem = currentItem.next(); 
     } 
     setTimeout(function() { 
      currentItem.fadeIn(speed, doNext); 
     }, gap); 
    } 

    doNext(); 

}); 
</script> 

Answer 1

Вы можете сделать:

if($('ul li:last').is(':visible')) { 
    showItemBorders(); 
}else if(currentItem==null){ 
    // your code 
}else if(currentItem.next().length!=0){ 
    // your code 
} 

Альтернатива будет увядать их все в то же время:

$('ul li').fadeIn(speed, showItemBorders()); 

Answer 2

Просто называют showItemBorders функцию в состоянии else и вернуть эту функцию для того, чтобы остановить время ожидания:

if (currentItem == null) { 
     currentItem = $('ul li:first'); //Get the first List Item 
    } else if (currentItem.next().length != 0) { 
     currentItem = currentItem.next(); 
    } else { 
     showItemBorders(); 
     return; 
    } 

См. Этот jsfiddle: http://jsfiddle.net/8WVVp/