双动画，.stop（）无固定它

Question

出于某种原因，我无法弄清楚如何停止双动画在下面的脚本：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var activeNews = "01"; 
     $(".newsNav.forward").click(function(event) { 
      event.preventDefault(); 
      if (activeNews == 01) { 
       $(".newsItem.01").stop(true, true).fadeOut(250, function() { 
        $(".newsItem.02").stop(true, true).fadeIn(250); 
       }); 
       activeNews = 02; 
      } else if (activeNews == 02) { 
       $(".newsItem.02").stop(true, true).fadeOut(250, function() { 
        $(".newsItem.03").stop(true, true).fadeIn(250); 
       }); 
       activeNews = 03; 
      } else if (activeNews == 03) { 
       $(".newsItem.03").stop(true, true).fadeOut(250, function() { 
        $(".newsItem.01").stop(true, true).fadeIn(250); 
       }); 
       activeNews = 01; 
      } 
     }); 
    }); 
</script> 

当你点击.newsNav.forward太快，多出现.newsItems，而不是一个。正如你所看到的，我知道.stop();应该解决这个问题，但我无法弄清楚它为什么不起作用。

HTML，如果是相关的：

<div id="news"> 
    <a class="newsNav back" href="#">&lt;</a> 
    <a class="newsNav forward" href="#">&gt;</a> 
    <h1>Latest News</h1> 
    <div id="newsSlider"> 
     <p class="newsItem 01 active">First News Item</p> 
     <p class="newsItem 02">Second News Item</p> 
     <p class="newsItem 03">Third News Item</p> 
    </div><!--/#newsSlider--> 
    <div style="clear:both;"></div> 
</div><!--/#news--> 

相关CSS以及：

#contentWrapper #content #news #newsSlider p.newsItem { 
     display: none; 
    } 

    #contentWrapper #content #news #newsSlider p.newsItem.active { 
     display: block; 
    } 

Answer 1

你只停止某些类的动画。要在动画中实现“全局”停止，您必须清除动画队列中所有可能会在JS函数中动画的元素。

这将意味着沿着线做的事情：

$(document).ready(function() { 
    var activeNews = "01"; 
    $(".newsNav.forward").click(function(event) { 
     event.preventDefault(); 

     // Pre-emptively stops all animation 
     $(".newsItem").stop(true, true); 

     // Note the removal of the .stop() method before each animation 
     if (activeNews == 01) { 
      $(".newsItem.01").fadeOut(250, function() { 
       $(".newsItem.02").fadeIn(250); 
      }); 
      activeNews = 02; 
     } else if (activeNews == 02) { 
      $(".newsItem.02").fadeOut(250, function() { 
       $(".newsItem.03").fadeIn(250); 
      }); 
      activeNews = 03; 
     } else if (activeNews == 03) { 
      $(".newsItem.03").fadeOut(250, function() { 
       $(".newsItem.01").fadeIn(250); 
      }); 
      activeNews = 01; 
     } 
    }); 
});