0

私のコードにいくつかの小さな問題があります。「サインアップ」をクリックすると、下にスクロールしてフォームが表示される JQUERY シーケンスを作成しました。今のところ、関数がフォームを閉じて一番上に戻るボタンが一番下にあります。

例はここで見ることができます: http://www.icecable.com/sandbox/priority%5Fsign%5Fup/test.html

「Sign Up Now」をクリックすると、アニメーションが正しく動作します。[閉じてトップに戻る] をクリックすると、アニメーションが再び正しく動作します。問題はこの後です。

いずれかの「今すぐサインアップ」ボタンをクリックしようとすると、「高さ」のアニメーションは通常どおり開始されますが、明らかな理由もなく「scrollTop」のアニメーションに大きな遅延が生じます。

これが私のコードです

$(document).ready(function() {

$('.dealer').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '860'
    }, 1800, "easeInOutQuint");
});

$('.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '0px'
    }, 1500, "easeInOutQuint");
});

$('.dealer').click(function(e) {
    e.preventDefault();
  $('#priority').animate({
    height: 'show'
    }, 1200,  "easeInOutCirc");
});

$('.top').click(function(e) {
    e.preventDefault();
  $('#priority')
    .animate({
        height: 'hide'
        }, 590, "easeInQuint");

});

//Form for Distributors

$('.distributor').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '860'
    }, 1800, "easeInOutQuint");
});

$('.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '0px'
    }, 1500, "easeInOutQuint");
});

$('.distributor').click(function(e) {
    e.preventDefault();
  $('#distributor').animate({
    height: 'show'
    }, 1200,  "easeInOutCirc");
});

$('.top').click(function(e) {
    e.preventDefault();
  $('#distributor')
    .animate({
        height: 'hide'
        }, 590, "easeInQuint");

    });
});

私が間違っていることはありますか？フォームが再び非表示になった後にイベントをリセットする方法はありますか? ヘルプ/洞察/リソースは大歓迎です!

意思

4

1 に答える 1

0

フィドルがなければ、確かなことは言えませんが、いくつかのconsole.log呼び出しを使用して開始値と終了scrollTop値を出力することをお勧めします。以前にこのような問題がいくつかありましたが、通常、間違った量をスクロールして間違った量に復元するという問題が原因です.

気付かないかもしれませんが、上にスクロールすると、値が負の数scrollTopを超えている可能性があります。0ウィンドウは負の値までスクロールできないため、表示されるアニメーションを開始するにはscrollTop、値が に戻るまで「待機」する必要があります。0

注:scrollTopをゼロに設定した場合でも、これが最初の位置ではない可能性があるため、これが発生する可能性があります。「ネガティブ」と言ったのは、「初期位置に対してネガティブ」という意味です。

更新:このページを見てください。また、対応する SO 投稿へのリンクと、スムーズに一番上までスクロールする方法を説明しています。私は以前にコードの修正版を使用したことがあり、あなたが持っているものと非常に似ていますが、SO の投稿は少し余分な洞察を与えるかもしれません.

また、要素と要素の両方ではなくanimate、要素のみを呼び出すように関数を変更します。"html""html""body"

于 2013-03-20T20:07:33.793 に答える