0

なぜこれがうまくいかないのか分かりません。たぶん、そこにあるjQueryの達人の1人が私がこの仕事をするのを手伝ってくれるでしょう！

以下のスクリプトから、アンカー（#web）に簡単に移動したい5という名前のULブロックがあることがわかります。メニュー項目をクリックすると、アラートがアクティブになるので、その部分は正しいと思います。

$(function() {
$('ul.five a').bind('click',function(event){
    var $anchor = $(this);
    alert('hellooo')
    $('html, body, section').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 500,'easeInOutExpo');

    event.preventDefault();
});

}）;

これが役立つ場合に備えて、私のセクションの1つはどのように見えますか？

<section class="row divider-down" id="section1">
<header>
    <h1><img src="image/image1.png" alt="Alt"></h1>
    <p>some text</p>
</header>

ここで明らかに間違っているものを見た人はいますか？私が言ったように、アラートがポップアップしますが、セクションまで「緩和」されませんか？

4

1 に答える 1

2

あなたは近かったと思います。2つのこと：

  1. アニメートする対象を変更する$('body')
  2. jQuery UIが含まれていない限り、「easeInOutExpo」を使用することはできません（以下の編集を参照）。

これを試して：

$(function() {
    $('ul.five a').bind('click',function(event){
        var $anchor = $(this);
        var $section = $($anchor.attr('href')); 
        if (!$section.length) { return; } // bail if there is no section

        $('body').stop().animate({ // only scroll the body
            scrollTop: $section.offset().top
        }, 500); // must remove 'easeInOutExpo' or include jQuery UI

        event.preventDefault();
    });
});

編集： JQUERYドキュメントから：

緩和

.animate（）の残りのパラメーターは、使用するイージング関数に名前を付ける文字列です。イージング関数は、アニメーション内のさまざまなポイントでアニメーションが進行する速度を指定します。jQueryライブラリの唯一のイージング実装は、swingと呼ばれるデフォルトと、linearと呼ばれる一定のペースで進行する実装です。プラグイン、特にjQuery UIスイートを使用すると、より多くのイージング機能を利用できます。

したがって、ページにjQuery UIを追加しない限り、「easeInOutExpo」を使用することはできません。

于 2012-06-22T19:08:20.820 に答える