jquery:淡出然后向上滑动

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

我在jquery 1.3.2上测试了它,它确实有效。

编辑:这是我从中调用的代码。#slide then fade是button元素的ID,article text是DIV标记上的类:

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

编辑2:修改为使用内置幻灯片。

编辑3:重写为切换,并使用fadeto

听起来使用jquery更好 fadeTo 命令

 $(function() {

     $("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.00, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });

     });

});

Working Demo here .

通过在前一个命令的回调函数中执行每个命令,在前一个命令完成之前,该命令将不会运行;当元素从DOM中移除而不等待slideup完成时,将发生“跳转”。

你不能把它拴起来吗?

$('myelement').fadeOut().slideUp();

编辑 :

也许吧 this 会有帮助吗?

$("#id").fadeIn(500, function () {

    $("#id2").slideUp(500).delay(800).fadeOut(400);

});

尝试 $('.row').animate({ height: 'toggle', opacity: 'toggle' }, 'slow').slideUp();

demo Here

fadeout函数接受回调函数的第二个可选参数,因此您应该能够执行如下操作:

$('elementAbove').fadeOut(500, function() {
    $('elementBelow').slideUp();
});

编辑:忘记添加淡出速度作为第一个参数