动画列表项后的回调功能

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

只需在else条件中调用showItemBorders函数并返回此函数即可停止超时：

    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/