Anchor Onclick分部亮點

Question

我做了一個簡單的網頁，其中有很多部門。因此，要直接導航到一個部門我已經把錨頂部是這樣的：

<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 For the Code

任何幫助，將不勝感激。提前致謝。

Answer 1

在你的代碼$（ 'HTML，身體'）返回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; 
}); 

JsFiddle

Answer 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; 
});