使用jQuery对fadein/fadeout的动画效果

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

尝试使用淡入动画:(失败)

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

我该如何改进这段代码？

Answer 1

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

这是更新的代码

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

编辑：这是更新的代码。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);
  });
});