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

Answer 3

Basically your css and js animations are clashing. You should probably stick to one or the other. Also both js animations are running at the same time fadeIn and fadeOut .

An option is to wait until the fadeOut animation ends before starting the fadeIn animation. You can do that with a timeout.

In the example below the function hideThenShow waits until the of the fadeOut animation (500ms) then runs the fadeIn on the selected elements.

As a bonus you could loop through your filters and your list elements instead of repeating the hideThenShow function in the example.

Hope it helps

 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>