使用jQuery在选项卡之间切换，使用不透明度作为重点

问题是：

我正在为我的个人投资组合网站创建一个图库页面。我需要它有多个顶部链接，为我的艺术不同类别。登陆网站后，将选择“全部”选项，我的艺术的所有缩略图将以完全不透明度显示。单击链接时，只有属于该链接对应类别的缩略图将保持100%不透明度，而其他缩略图将变暗到50%

我有一些我认为接近正确的代码，但仍然什么也不做。下面是我正在使用的代码

（缩写）HTML：

CSS：

$(document).ready(function() { var $holder = $('ul.ourHolder'); var $data = $holder.clone(); $('#filterOptions li a').click( function(e) { // reset the active class on all the buttons $('#filterOptions li').removeClass('active'); // assign the class of the clicked filter option // element to our $filterType variable var $filterType = $(this).attr('class'); $(this).parent().addClass('active'); if ($filterType == 'all') { // assign all li items to the $filteredData var when // the 'All' filter option is clicked var $filteredData = $data.find('li'); $filteredData.animate({opacity: 1.0}, 500); } else { var $filteredData = $data.find('li[data-type=' + $filterType + ']'); $filteredData.animate({opacity: 0.5}, 500); } }); }); $（文档）.ready（函数（）{ var$holder=$（'ul.ourHolder'）； var$data=$holder.clone（）； $（“#过滤器选项li a”）。单击( 职能（e）{ //重置所有按钮上的活动类 $（'filterOptions li'）。removeClass（'active'）； //分配单击的筛选器选项的类 //元素添加到$filterType变量中 var$filterType=$（this.attr（'class'）； $（this.parent（）.addClass（'active'）； 如果（$filterType=='all'）{ //在以下情况下，将所有li项分配给$filteredData变量： //单击“全部”筛选选项 var$filteredData=$data.find（'li'）； $filteredData.animate（{opacity:1.0}，500）； } 否则{ var$filteredData=$data.find（'li[data type='+$filterType+']）； $filteredData.animate（{opacity:0.5}，500）； } }); }); 非常感谢您的帮助，我需要启动我的新网站，而这段代码正是阻碍我前进的原因

HTML

<ul id="filterOptions">
    <li class="active"><a href="#" data-type="all">All</a>

    </li>
    <li><a href="#" data-type="ty">Typography</a>

    </li>
    <li><a href="#" data-type="pr">Print</a>

    </li>
</ul>
<ul class="ourHolder">
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
</ul>

---

尝试使用

$fiteredata.fadeTo（500,1）和$filteredata.fadeTo（500,5）

代替

动画制作

。它仍然不起任何作用。无论以何种方式输入，所有内容都始终保持100%不透明度。这基本上就是我想要的效果：但所有内容都不必从黑白开始。非常感谢。实际上我不知道。每个部分都有什么作用，但我非常欣赏这些代码。当然，这可以满足我的需要，但是有没有办法让淡入淡出效果同时发生而不是一个接一个地发生呢？

$。每个

都只是一个jQuery迭代器，用于保存通过

$（'.ourHolder li'）

选择的元素的对象。我在我的JSFIDLE上运行了好几次，虽然

会连续打开，但要单独区分它们太快了。嗯，由于某种原因，当我使用演示时，我会看到一堆弹出窗口，每个图像中都有true或false，所以我看不出它们是如何转换的。它在我正在工作的网站上显示的方式，你可以清楚地看到淡出部分，然后是淡入部分。在选项卡之间切换是可以的，但是在第一次单击“所有”选项卡（所有选项卡都是100%）到任何选项卡时，您可以清楚地看到它从所有100%到所有50%，再到一些图像返回到100%。这并不可怕，但如果有办法解决它，我愿意。如果没有，我就调整一下。再次感谢你！啊，对不起，我在里面留了个“警报”。试试这个：哦，如果你同意的话，请一定要接受答案。一定是我注意到了停顿，因为我的缩略图很大。这真的没什么大不了的，它仍然做我想做的事。非常感谢你的帮助！这使我的整个网站发布回到正轨，这太棒了。

<ul id="filterOptions">
    <li class="active"><a href="#" data-type="all">All</a>

    </li>
    <li><a href="#" data-type="ty">Typography</a>

    </li>
    <li><a href="#" data-type="pr">Print</a>

    </li>
</ul>
<ul class="ourHolder">
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
</ul>

$(document).ready(function () {
    var $holder = $('ul.ourHolder');
    var $data = $holder.clone();
    var holders = $('.ourHolder li');
    $('#filterOptions li a').click(
    function (e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');
        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).data('type');
        var noOpac = $(this).data('type');
        $(this).parent().addClass('active');
        if ($filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
            $filteredData.animate({
                opacity: 1.0
            }, 500);
            $('.ourHolder li').animate({
                opacity: 1.0
            }, 0);
        } else {
            $('.ourHolder li').animate({
                opacity: 0.5
            }, 250);
            $.each(holders, function (i, v) {
                if ($(this).hasClass(noOpac)) {
                    $(this).animate({
                        opacity: 1.0
                    }, 0);
                }
            });
        }

    });
});