Question

我有一个动画淡入（fadeIn（））无序列表中的列表项。我有那么多工作，但我希望在列表项全部可见后调用另一个函数 - 我猜这将是一个回调函数。

基本上，在我的6个列表项目消失之后，我想淡入它们之间的边界。而已！只是在回调函数的放置方面遇到问题，我一直认为函数应该出错。

提前感谢任何帮助

HTML code：

<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/

动画列表项后的回调函数

2 个答案: