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

您在链接代码中有一个目标变量，用于：

$('div').not(target).animate({ opacity: 0.4 }, 1000);

Answer 2

以下是我设置的演示：

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

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

平滑滚动+ Div不透明度

2 个答案:

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