3

今日、JavaScript と jQuery の学習を始めたばかりで、最初の問題が頭を悩ませました。これを解決するために何時間も探していましたが、解決策はどれもうまくいきませんでした。

私の問題は、メニュー リンクをクリックするとコンテンツが左右にスライドする「カルーセル」Web サイトを作成したことです。

すべて正常に動作しますが、クリック機能のアニメーションが終了する前に別のメニューリンクをもう一度クリックすると、コンテンツがスライドして正しい位置になくなります。

promise().done()、フラグ、コールバックなどを試しましたが、何もうまくいきませんでした:(多分私はそれを間違ってやった..

このクリック機能を終了するまでブロックするか、この機能のキューを作成して、同時にではなく次々に実行するための解決策を探しています。

これが私のJSコードです。完璧ではなく、もっとうまく解決できることはわかっていますが、私が言ったように、今日このことを学び始めたばかりで、構文などにはまだ慣れていません。

    var gotoPage = function(pos) {

    if(pos == 'home') {
        $('li#home').css({"opacity" : 1});
        $('li#home').css({"left" : "1700px"});
        $('li#home').animate({"left" : "0px"}, speed, 'easeInOutQuint');

        $('li#news').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#news').animate({"opacity" : 0}, 0);
        $('li#galery').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#galery').animate({"opacity" : 0}, 0);
    } else if (pos == 'news') {
        $('li#news').css({"opacity" : 1});
        $('li#news').css({"left" : "1700px"});
        $('li#news').animate({"left" : "0px"}, speed, 'easeInOutQuint');

        $('li#home').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#home').animate({"opacity" : 0}, 0);
        $('li#galery').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#galery').animate({"opacity" : 0}, 0);
    } else if (pos == 'galery') {
        $('li#galery').css({"opacity" : 1});
        $('li#galery').css({"left" : "1700px"});
        $('li#galery').animate({"left" : "0px"}, speed, 'easeInOutQuint');

        $('li#news').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#news').animate({"opacity" : 0}, 0);
        $('li#home').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#home').animate({"opacity" : 0}, 0);
    }

}

$(document).ready(function(){

    hideAll();
    autoSelect();

    $('#home').click(function(){        
        gotoPage(posHome);
    });

    $('#news').click(function(){
        gotoPage(posNews);
    });

    $('#galery').click(function(){      
        gotoPage(posGalery);
    });

});

手伝ってくれませんか？

4

3 に答える 3

0

テストされていませんが、これを探しています -

$('#home').click(function(){  
    if( $(this).is(':animated') ) return;
    gotoPage(posHome);
});

$('#news').click(function(){
    if( $(this).is(':animated') ) return;
    gotoPage(posNews);
});

$('#galery').click(function(){     
    if( $(this).is(':animated') ) return;
    gotoPage(posGalery);
});

アニメーション用の jQuery 選択のテストについては、こちらを参照してください

于 2013-03-27T01:20:33.097 に答える
0

BradGreens の回答が最も正しいようです。

楽しみのための代替手段は次のとおりです。

「currentlyAnimating」ブール値を使用して、アニメーションがまだ実行されているかどうかを確認できます。アニメーションが完了したら、false に設定します。

var animating = false

if(pos == 'home' && !animating) {
    animating = true;
    $('li#galery').animate({"opacity" : 0}, 100,  function() {
        // Animation complete.
        animating = false;
    }););
}
于 2013-03-27T01:22:42.287 に答える
0

少し違うことを考えるかもしれません。つまり、3 つの要素のいずれかをクリックして、以前の不完全なクリック アクションの進行状況を「ハイジャック」できるようにすることです。

$(document).ready(function() {
    var $currentePage = null;

    var gotoPage = function(pos) {
        if($currentePage) {
            $currentePage.stop().animate({'left' : '-1700px'}, speed, 'easeInOutQuint').css('opacity', 0);
        }
        $currentePage = $('li#' + pos).css({
            'opacity' : 1,
            'left' : '1700px'
        }).animate({'left' : '0px'}, speed, 'easeInOutQuint');
    }

    hideAll();
    autoSelect();

    $('#home, #news, #galery').click(function() {
        gotoPage(this.id);
    });
    $('#home').trigger('click');
});

ご覧のとおり、gotoPage()大幅に削減され、次のように機能します。

  • 現在実行中のアニメーションを強制終了します
  • 現在の要素を残りの状態に戻します
  • 要求された要素をアクティブな状態にアニメーション化します。
于 2013-03-27T02:33:36.697 に答える