使用 jQuery 的淡入/淡出动画效果

Question

要了解我的代码，请访问此页面：

请先点击包装过滤器

http://codepen.io/mariomez/pen/qNrzAr?editors=0010

这是一种简化的动画过滤方法。

每个红色框可能有多个类作为过滤器的标识符。 我使用这段代码的目标是为淡入和淡出实现一种很好的动画方式。现在我设法做到这一点只是为了淡入。

即使我为淡出编写了动画，我也无法在 JS 代码中正确使用它。

1 个过滤器的示例：我希望除“包装”之外的所有类都能很好地淡出并让包装类淡入。

jQuery 代码

    $(document).ready(function(){
    $(".filter-logo").click(function(){
        $(".all").fadeOut(normal,addClass('animated fadeOutEffect'));
        $(".logo").fadeIn(normal,addClass('animated fadeInEffect'));
    });
    $(".filter-website").click(function(){
        $(".all").fadeOut();
        $(".website").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-packaging").click(function(){
        $(".all").fadeOut();
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-forsale").click(function(){
        $(".all").fadeOut();
        $(".forsale").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-all").click(function(){
        $(".all").fadeOut();
        $(".logo, .website, .packaging, .forsale, .all").fadeIn().addClass('animated fadeInEffect');
    });
});

尝试使用淡入动画：(FAILED)

$(".all").not('.packaging').fadeOut().addClass('animated  fadeOutEffect');
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });

如何改进此代码？

Answer 1

我已经更新了您的示例。 http://codepen.io/jammer99/pen/mEQabN 本质上你需要强制设置淡出在0秒内完成，另外由于你已经使用css生成动画，你应该使用hide()和show()而不是fadeOut()和fadeIn()

这是更新后的代码

  $(document).ready(function() {
      $(".all").each(function() {
        $(this).addClass("animated")
      })
      $(".filter-logo").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0);
        $(".logo").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
      });

      $(".filter-website").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0)
        $(".website").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
      });

      // UPDATE CODE - START ////////////
      $(".filter-packaging").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0);
        $(".packaging").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');

      });
      // UPDATE CODE - END ////////////

      $(".filter-forsale").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0);
        $(".forsale").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
      });

      $(".filter-all").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeOutEffect').addClass("fadeInEffect").show(0)
      });
    });

---

EDIT ：这是更新的代码。 http://codepen.io/jammer99/pen/mEQabN?editors=0010

$(document).ready(function() {
  $(".all").each(function() {
    $(this).addClass("animated")
  })
  $(".filter-logo").click(function(e) {
    e.preventDefault();
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect")
    setTimeout(function() {
      $(".all").hide(0)
      $(".logo").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
    }, 500);
  });

  $(".filter-website").click(function(e) {
    e.preventDefault();
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect")
    setTimeout(function() {
      $(".all").hide(0)
      $(".website").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
    }, 500);
  });

  $(".filter-packaging").click(function(e) {
    e.preventDefault();
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect")
    setTimeout(function() {
      $(".all").hide(0)
      $(".packaging").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
    }, 500);
  });

  $(".filter-forsale").click(function(e) {
    e.preventDefault();
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect")
    setTimeout(function() {
      $(".all").hide(0)
      $(".forsale").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
    }, 500);
  });

  $(".filter-all").click(function(e) {
    e.preventDefault();

    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect")
    setTimeout(function() {
      $(".all").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
    }, 500);
  });
});

Answer 2

对于 1 过滤器的示例，您是说您希望“包装”成为唯一不淡出的过滤器，但是即使“包装”没有淡出，它也会淡入？

我假设您希望所有内容都淡出，然后让“打包”淡入。您可以通过在 fadeOut.all 时在回调中调用 fadeIn 来实现“打包”。

编辑：

所以fadeOut 函数接受一个完成回调，该函数将在fadeOut 动画完成后运行。您只需将一个匿名函数传递给fadeOut 参数，然后在该函数中执行您想要在动画完成后执行的操作：

$(".filter-packaging").click(function(){
    $(".all").fadeOut(function() {
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });
});

Answer 3

基本上你的 css 和 js 动画是冲突的。您可能应该坚持其中一个。两个js动画同时运行fadeIn和fadeOut。

一个选项是等到fadeOut 动画结束后再开始fadeIn 动画。你可以通过超时来做到这一点。

在下面的示例中，函数hideThenShow 等待直到fadeOut 动画（500 毫秒）然后在所选元素上运行fadeIn。

作为奖励，您可以遍历过滤器和列表元素，而不是在示例中重复 hideThenShow 函数。

希望对你有帮助

function hideThenShow($clickedElement, $elementsToShow){
  var duration = 500;
  $clickedElement.click(function(){
    $('.all').fadeOut(duration);
    setTimeout(function(){
      $elementsToShow.fadeIn();
    },duration);
  });
}

$(document).ready(function(){

  var filterLogo        = $(".filter-logo");
  var filterWebsite     = $(".filter-website");
  var filterPackaging   = $('.filter-packaging');
  var filterForsale     = $('.filter-forsale');
  var filterAll         = $(".filter-all");
  var websiteElemetns   = $('.website');
  var logoElements      = $(".logo");
  var packagingElements = $('.packaging');    
  var forsaleElements   = $('.forsale');
  var allElements       = $(".all");  
  
  hideThenShow(filterLogo, logoElements);
  hideThenShow(filterWebsite, websiteElemetns);
  hideThenShow(filterPackaging, packagingElements);
  hideThenShow(filterForsale, forsaleElements);
  hideThenShow(filterAll, allElements);
  
});

.ullist li {width:100px;background:#f00; height:100px; display:block; float:left;clear:none; margin:25px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="secmenu">
	<ul>
        <a href="#" class="filter-all"><li>All</li></a>
        <a href="#" class="filter-logo"><li>Logo</li></a>
        <a href="#" class="filter-website"><li>Website</li></a>
        <a href="#" class="filter-packaging"><li>Packaging</li></a>
        <a href="#" class="filter-forsale"><li>For sale</li></a>
</ul>
</div>


  <ul class="ullist">
<li class="website all">text</li>
<li class="website all">text</li>
<li class="website all">text</li>
<li class="packaging all">text</li>
<li class="packaging all">text</li>
<li class="logo all">text</li>
<li class="logo all">text</li>
<li class="logo all">text</li>
<li class="logo all">text</li>
<li class="logo all">text</li>
<li class="forsale all">text</li>
    
</ul>