Double Анимация, .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; 
     } 
    }); 
});