jQueryのスライドアニメーションをキャンセルしてリセットします

StackOverflow https://stackoverflow.com/questions/1882179

  •  18-09-2019
  •  | 
  •  

質問

私は擬似コードで、次のことを行う必要があり、divをトグルするために、いくつかのjQueryを書いています：

item.click
    check to see if the div I want to expand is hidden
    if so
        slideup all of the divs
        when finished...
        slide down the one I want to expose

をクリックすることができる複数の項目（この特定の場合では、ラジオボタン）があります。

私は（ここではstockOverflowに微細な人々からいくつかの助けのおかげで）すべてこの作業を取得することができます。

私はまだ持っている1つのバグは、1つの項目をクリックし、プロセスが終了する前に、その後、別の項目をクリックすると、アニメーションはスタッキングと混乱してき始めるということです。そして、私はすぐにトリガ項目間を前後にクリックすることで表示を破ることができます。私は「物事をリセットするためにそれらすべてを隠し、次にクリックしたときに物事がアニメーション化されている場合は、停止、および」実装することによってこの問題を解決しようとしました。

$('.toggleTriggersWrapper .toggleTrigger')
    .click(function(){

        var $togglePanesWrapper = $(this).closest('.toggleTriggersWrapper').next('.togglePanesWrapper').eq(0);

        var IDtoShow = '#' + this.className.match(/toggle\-.+?\b/);
        var $IDtoShow = $(IDtoShow);

        /* the next 3 lines are my attempted 'fix' */
        if($togglePanesWrapper.children('.togglePane').is(":animated")) {
            $togglePanesWrapper.children('.togglePane').hide().stop();
        };

        $togglePanesWrapper.children('.togglePane').not(IDtoShow).slideUp('fast', function(){

                /* great fix for dealing with multiple animations as found here: http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/ */
                var wait = setInterval(function() {
                    if( !$togglePanesWrapper.children('.togglePane').is(":animated") ) {
                        console.log('if is animated');
                        clearInterval(wait);
                        $togglePanesWrapper.children('.togglePane').not(IDtoShow).hide();
                        $togglePanesWrapper.children(IDtoShow).slideDown('slow');
                    }
                }, 200);                

            });
    })

どのような上記の修正で起こることは、アニメーションが停止しないということですが、私のトグルのdivの高さは、それらが停止するように言われた時点で「立ち往生」を取得します。それは、そのdivが、今それが本当にあるとして、それは半分だけのように背が高いです考えている、div要素が滑落しているかのように、私のような「停止」とし、トリガー別の項目をクリックします。

このための回避策の任意のアイデア？

役に立ちましたか？

解決

あなたは stop方法でます：

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

最初のパラメータ（clearQueue）は、任意のキューに入れられたアニメーションを停止し、アニメーションキューをクリアするためのjQueryを伝える。

二番目のパラメータ（gotoEnd）は、現在のアニメーションを完了するためにjQueryを伝える。

他のヒント

新しいポストが正しい...あなただけのキューアイブをクリアshoudlとしてもこれを反映する私の答えをchangeedます。

試してください：

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

http://docs.jquery.com/Effects/stopする

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top