4

たくさんの分割があるシンプルなウェブページを作りました。したがって、分割に直接移動するには、次のようにアンカーを上に置きました。

<a href="#first">First</a><br/>
<a href="#second">Second</a><br/>
<a href="#third">Third</a>

スムーズなスクロールのために、JavaScriptを使用しました：

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

次に、選択した分割に効果を追加します。そのため、ユーザーがアンカーをクリックすると、ページがその部門までスムーズにスクロールし、選択された部門が一瞬強調表示されます。Stack Overflow の受信トレイにニュースが届いてクリックするのと同じです。ページがロードされ、ニュース項目が短時間強調表示されます。

私は自分のページにそれをしたいです。18 を超える部門があり、それらはすべて同じであるため、選択した部門を区別する必要があります。

Fiddle の例は次のとおりです。Fiddle For the Code

どんな助けでも大歓迎です。前もって感謝します。

4

2 に答える 2

5

あなたのコードでは、 $('html, body') は 2 つの要素を返すため、アニメーションは 2 回起動します。jquery.ui を含めると、次のことが可能になります。

$('a').click(function(){
    var selector = $(this).attr('href');        
    $('html').animate({
        scrollTop: $(selector).offset().top
    }, 500,'',function(){
        $(selector).effect("highlight", {}, 1000);                             
    });
    return false;
});

Jsフィドル

于 2012-08-13T14:57:03.527 に答える
2

これは例のような不透明度を使用します:

$('a').click(function(){
    var el = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500, function(){
        $(el).animate({'opacity':0.5},200, function(){ $(el).animate({'opacity':1}, 200)} );
    });
    return false;
});
于 2012-08-13T14:47:10.140 に答える