1

  1. 開く/閉じるリンクがクリックされたときに、jQuery animate を使用してサイドバー div を画面の左側から「イン/アウト」にスライドさせて実験してきました。これはうまくいきます。

  2. 次に、ユーザーがサイドバー div の一番下までスクロールしたときに、サイドバー div をアニメーション化したいと考えていましたが、これも正常に機能します。

  3. 最後のアニメーションがサイドバーをフェードアウトさせた後で、開いているリンクをもう一度クリックしようとすると、問題が発生します。(pt.2 実行後)

開いているリンクをクリックすると、約 3 ～ 4 秒の遅延が発生します。何が間違っていたのかわかりません。現在、私のアプローチにかなり行き詰まっているので、いくつかのポインタをいただければ幸いです。

ありがとう。

デモ: http://jsfiddle.net/fRFCN/5/

1) [開く] をクリックします。 2) 下にスクロールします。 3) サイドバーがフェードします。 4) [開く] を再度クリックします。ステップ 4 は遅延エラーです。

jQuery(document).ready(function() {

jQuery(".open a").on("click", function() { 

    jQuery('.sidebar').animate({
          'opacity': '1',
          right: '+=0'
    },300);

    return false; 

});


jQuery('.close').on('click', function() {            
        jQuery('.sidebar').animate({
              'opacity': '0',
              right: '+=0'
        },300);

        return false; 

 });


var element = jQuery('.sidebar');

jQuery(window).scroll(function() {

    var scroll = jQuery(window).scrollTop() + jQuery(window).height();
    var offset = element.offset().top + element.height();

    if (scroll > offset) {

        jQuery('.sidebar').animate({
              'opacity': '0',
              right: '+=0'
        },600);

    } 

});

});
4

1 に答える 1

0

この問題は、ウィンドウが上または下にスクロールされるたびscrollにコードが起動するため、サイドバーを非表示にするために多くのアニメーション イベントをキューに入れているためです。サイドバーはまだ実行されており、スクロールして上に戻った後でもサイドバーを非表示にしています。 . そのため、次のオープンは長いキューの最後になるため、再びオープンする際の可変時間遅延が生じます。

$('#pullout').animate({
    'opacity': '0',
    right: '+=0'
},600);

これを解決する 1 つの方法は、アニメーションが複数回追加されるのを停止する条件を追加することです。次に例を示します。

var element = $('#pullout');

if (scroll > offset && $('#pullout').css('opacity') == 1) {
    $('#pullout').animate({
    'opacity': '0',
        right: '+=0'
    },600);
}
于 2013-04-19T15:29:53.413 に答える