1

何らかの理由で、次のスクリプトでダブル アニメーションを停止する方法がわかりません。

<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すると、1 つではなく複数が表示されます。ご覧のとおり、.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;
    }
4

1 に答える 1

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;
        }
    });
});
于 2013-03-07T19:29:48.720 に答える