雙動畫，.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; 
     } 
    }); 
});