jquery - 平滑滚动 + Div 不透明度

Question

对于我正在开发的网站，我想创建一个内部平滑滚动 (#) 过滤器，该过滤器还可以降低除所选 div 之外的所有 div 的不透明度。

所以，在我的页面顶部会有这个过滤器(使用jquery平滑滚动滚动到页面上选定的div，使用此jquery代码http://css-tricks.com/snippets/jquery/smooth-scrolling/):

<p>Filter by:</p>
<a href="#sport">Sport</a>
<a href="#news">News</a>
<a href="#food">Food</a>
<a href="#drinks">Drinks</a>

到目前为止没有问题。但现在我想减少除已滚动到的 div 之外的所有 div 的不透明度。因此，如果我在过滤器中按“体育”，页面应滚动到并降低新闻、食品和饮料 div 的不透明度，例如0.4。

尝试寻找解决方案，但尚未找到任何结果。我怎样才能做到这一点？

提前致谢!

结果

通过向所有 div 添加 .toFilter 类并使用以下代码来设法使其正常工作:

$(document).ready(function() {

$('.filter').click(function() {
    var target = $(this.hash);
    if (target.length) {
        $('html,body').animate({scrollTop: target.offset().top}, 1000);
        $('.toFilter').not(target).animate({ opacity: 0.2 }, 500);
        target.animate({ opacity: 1.0 }, 500);
    }
});

});

Answer 1

这是我设置的演示:

http://jsfiddle.net/5NR7q/1/

var $p = $('p');

$('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var $target = $(this.hash);
        if ($target.length) {
            $('html,body').animate({
                scrollTop: $target.offset().top
            }, 1000, function() {
                $p.removeClass('dimmed').not($target).addClass('dimmed');
            });
            return false;
        }
    }
});

我建议在动画结束时设置一个特定的类，这将使必要的元素变暗。