jQuery: FadeOut then SlideUp

前端 未结 6 2103
遥遥无期
遥遥无期 2020-12-04 11:13

If an item is being deleted then I would like to fade it out and slide the other elements up to fill the empty space. Now, when I use fadeOut() the item doesn\'

6条回答
  •  生来不讨喜
    2020-12-04 12:12

    jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
      if (this.is(":hidden")) {
        return this.slideDown(speed, easing).fadeTo(speed, 1, easing, callback);
      } else {
        return this.fadeTo(speed, 0, easing).slideUp(speed, easing, callback);
      }
    };
    

    I tested it on JQuery 1.3.2, and it does work.

    Edit: This is the code I called it from. #slide-then-fade is the ID of a button element, article-text is a class on a div tag:

    $(document).ready(function() {
      $('#slide-then-fade').click(function() {
        $('.article-text').fadeThenSlideToggle();
      });
    });
    

    Edit 2: Modified to use the built-in slideUp.

    Edit 3: Rewritten as a toggle, and using fadeTo

提交回复
热议问题