0

我在无序列表中的 (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>
4

2 回答 2

0

你可以这样做：

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());
于 2013-04-19T15:32:01.853 回答
0

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

于 2013-04-19T15:37:30.147 回答