animated effect for fadein/fadeout using jQuery

Question

To understand my code please visit this page:

Please click on packaging filter first

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

It's a simplified animated filtering method.

Each red box might have more than one classes as an identifier for the filter. My goal with this code is to achieve a nice animated way for fade-in and for fade-out. For now I managed to do this only for fade-in.

Even though I wrote the animation for fade-out I can't use it properly in the JS code.

Example for 1 filter: I want all classes except "packaging" to fade-out nicely and have the packaging class fade-in.

jQuery CODE

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

Trying to use the fade-in animation: (FAILED)

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

How can I improve this code?

Answer 1

I have updated your example. http://codepen.io/jammer99/pen/mEQabN Essentially you need to set fadeout to finish within 0 seconds forcefully, additionally since you have already used css to generate the animation, you should use hide() and show() instead of fadeOut() and fadeIn()

here's the updated code

  $(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 : Here is updated code. 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

For your Example for 1 filter, you're saying you want "packaging" to be the only one to not fade out, but then have "packaging" fade in even though it didn't fade out?

I'm going to assume you want everything to fade out, then have "packaging" fade in. You can do so by calling the fadeIn for "packaging" inside a callback when you fadeOut .all.

Edit:

So the fadeOut function takes a completion callback, a function that will run after the fadeOut animation completes. You just need to pass in an anonymous function to the fadeOut parameter, and inside that function do what you want to do after the animation completes:

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