fadein/fadeout 使用 jQuery 的动画效果

Question

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

请先点击打包过滤器

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

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

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

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

1 个过滤器的示例： 我希望除 "packaging" 之外的所有 classes 都能很好地淡出并让包装 class 淡出-in.

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

尝试使用淡入动画：（失败）

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

如何改进此代码？

Answer 1

对于 1 个滤镜的示例，您是说您希望 "packaging" 成为唯一不淡出的滤镜，但随后 "packaging" 淡入，即使它没有淡出出去？

我假设您希望所有内容都淡出，然后让 "packaging" 淡入。您可以通过在回调中为 "packaging" 调用 fadeIn 来实现你fadeOut.all.

编辑：

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

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

Answer 2

基本上你的 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>

Answer 3

我已经更新了你的例子。 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);
  });
});

fadein/fadeout 使用 jQuery 的动画效果

animated effect for fadein/fadeout using jQuery

javascript

jquery

animation

fadeout

fadein