1

Web サイトのいくつかのセクションを左右にスライドするメニューがあります。

もともと、「onClick」でトリガーされる関数「goto()」があり、アニメーションは期待どおりに機能しました。

HTML をクリーンアップしたかったので、JS ファイルのクリック イベントにバインド ハンドラーを追加しました。

var navanchors = $('#navMain a');
var slider = $('#slider');

init = function() {

navanchors.bind('click', function() {

    var t = $(this);
    var id = t.attr('href');
    var dist = $(id).position().left;

    //animate to the div id.
    slider.animate({
        "right": (dist)
    }, 600);

});
};

init();​

左のアニメーションは期待どおりに動作しているように見えますが、右のアニメーションはオフになっています。最初のクリックで、アニメーションは予想される距離の 2 倍移動するように見えます。2 回目のクリックで、アニメーションなしでリセットされます。

こちらの問題をご覧ください: http://jsfiddle.net/Kj4bU/1

検索して実験しましたが、途方に暮れています。どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

3

click処理するイベントのデフォルトの動作が発生するのを妨げているわけではありません。クリックはアンカー要素で発生するため、ブラウザーはアニメーション中にクリックされたアンカーの位置にスクロールしようとし、発生している問題が発生します。

event.preventDefault()を使用して、この動作を禁止できます。

navanchors.on("click", function(e) {
    e.preventDefault();

    var t = $(this);
    var id = t.attr("href");
    var dist = $(id).position().left;

    //animate to the div id.
    slider.animate({
        "right": dist
    }, 600);
});

更新されたフィドルはこちらにあります。

(上記のコードでは、 bind( )の代わりにon()を使用していることに注意してください。jQuery 1.7 以降では、前者が後者よりも優先されています)。

于 2012-11-06T11:04:12.583 に答える