JQuery过滤库

Question

我已经创建了一个过滤的画廊，它的工作很好，但我有一个冲突，我不想淡出（消失）未选择类别的图片我只是想降低其不透明度并显示所选类别的完全不透明度...我试图用fadeout()函数替换fadeTo()函数但它没有工作....这里是我为这个html页面创建的代码....我没有代码的任何问题，除了这一点，但它的效果很好。

＆＃13;

＆＃13;

< script type = "text/javascript" >

  jQuery(function($) {

    // filter selector
    $("#galleryTab a").on("click", function() {
      var $this = $(this);
      // if we click the active tab, do nothing
      if (!$this.hasClass("active")) {
        $("#galleryTab a").removeClass("active");
        $this.addClass("active"); // set the active tab
        // get the data-rel value from selected tab and set as filter
        var $filter = $this.data("rel");
        // if we select view all, return to initial settings and show all
        $filter == 'all' ?
          $(".fancybox")
          .attr("data-fancybox-filter", "fancybox")
          .not(":visible")
          .fadeIn() : // otherwise
          $(".fancybox")
          .fadeOut()
          .filter(function() {
            // set data-filter value as the data-rel value of selected tab
            return $(this).data("filter") == $filter;
          })
          // set data-fancybox-filter and show filtered elements
          .attr("data-fancybox-filter", "$filter")
          .fadeIn();

      } // if
    }); // on
    // fancybox
    $(".fancybox").fancybox({
      modal: false, // enable regular nav and close buttons
      // add buttons helper (requires buttons helper js and css files)
      padding: 0,
      helpers: {
        thumbs: {
          width: 50,
          height: 50,
        },
      }
    });

  }); // ready

<
/script>

＆＃13;

<div id="galleryTab">
  <a data-rel="all" href="javascript:;" class="filter active">All Projects</a>
  <a data-rel="vil" href="javascript:;" class="filter">Villas</a>
  <a data-rel="res" href="javascript:;" class="filter">Residential and Commercial</a>
  <a data-rel="mix" href="javascript:;" class="filter">Mixed Used</a>
  <a data-rel="port" href="javascript:;" class="filter">Previous Projects</a>
</div>
<div class="container">
  <div id="galleryWrap" class="cf">


    <!-- villas -->
    <a title="Mr.Omran Villa (G+1+R)" class="fancybox" data-filter="vil" rel="villa1" href="images/Projects/1.jpg"><img src="images/Projects/1s.jpg" alt="omran" width="240" height="160" id="img1"></a>
    <div class="hidden">
      <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/1h.jpg"><img src="images/Projects/1h.jpg" alt="omran"></a>
      <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/12h.jpg"><img src="images/Projects/12h.jpg" alt="omran"></a>
    </div>


    <a title="Mr.saif Villa (G+1+R)" data-tags="Villas" class="fancybox" data-filter="vil" rel="villa2" href="images/Projects/2.jpg"><img src="images/Projects/2s.jpg" alt="saif" width="240" height="159" class="img-responsive" id="img2"></a>
    <div class="hidden">
      <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/21h.jpg"><img src="images/Projects/21h.jpg" alt="saif"></a>
      <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/22h.jpg"><img src="images/Projects/22h.jpg" alt="saif"></a>
    </div>

    <!-- Buildings -->
    <a title="Ajman Tower (G+8Podium+26 Typical+R)" class="fancybox" data-tags="Residential and Commercial" data-filter="res" rel="bldg1" href="images/Projects/4.jpg"><img src="images/Projects/4s.jpg" alt="ajman" width="240" height="160" class="img-responsive" border="0"></a>
    <div class="hidden">
      <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/41h.jpg"><img src="images/Projects/41h.jpg" alt="ajman"></a>
      <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/42h.jpg"><img src="images/Projects/42h.jpg" alt="ajman"></a>
    </div>

＆＃13;

＆＃13;

＆＃13;