动画列表项后的回调函数答案

【问题标题】：Callback function after animating list items动画列表项后的回调函数
【发布时间】：2013-04-19 15:21:27
【问题描述】：

我有一个动画淡入 (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>

【问题讨论】：

jsfiddle.net/5sXyq

标签： javascript jquery animation callback fadein

【解决方案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());

【讨论】：

【解决方案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/

【讨论】：