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 个元素，因此动画将触发两次。如果你包含 jquery.ui 你将能够做到这一点：

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

提琴手

于 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 回答