jQuery的：淡出则效果基本show

StackOverflow https://stackoverflow.com/questions/734554

  •  09-09-2019
  •  | 
  •  

题

如果一个物品被删除，则我想褪色出来并滑动其它元件向上以填充空的空间。现在，当我使用fadeOut()的项目不具有在导致其他项目跳跃起来（而不是很好地向上滑动）的端部的高度。

如何slideUp()和元件fadeOut()后正确？

有帮助吗？

解决方案 

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，以及它的工作。

编辑：这是我称为它从代码。 ＃滑动然后褪色是按钮元件的ID，物品文本是div标签的类：

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

修改2：修改为使用内置的效果基本show

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

     });

});

工作演示此处。

通过在前述命令的回调函数执行每个命令，该命令将不运行，直到前一个完成;当元件从DOM移除，而不等待效果基本show完成一个“跳跃”发生。

你不能IT连锁？

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

修改：

这将帮助呢？

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

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

});

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

演示这里

在淡出功能需要一个回调函数的第二个可选的参数，所以你应该能够做这样的事：

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

编辑：忘到淡出的速度添加作为第一个参数

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top