Question

我想让这个消息持有者在我从HTML代码中删除之前以一种很好的方式切换，我不想添加任何＆＃34; setTimeout（）＆＃34;在解决方案的顶部（在我的代码的其他地方已经有太多）。

这就是我所拥有的：

var messtate;

function slidebubble(number){

$('#messsage'+number).animate({"opacity":1},{queue: false, duration: 1100});
$('#messsage'+number).animate({ "margin-left": "+=260" }, 500);
messtate = setTimeout(function(){ remove(number); }, 6000);
}

function remove(num){
$( "#messsage"+num ).toggle(500).delay(1000).remove();   
}

问题在于它根本没有切换，它只会在6秒后被移除，为什么延迟不起作用呢？

Answer 1

我建议您在删除方法中使用hide功能代替toggle。

使用hide，您可以添加延迟，然后使用回调来删除元素。

我认为它会奏效。

var messtate;

function slidebubble(number){

  $('#messsage'+number).animate({"opacity":1},{queue: false, duration: 1100});
  $('#messsage'+number).animate({ "margin-left": "+=260" }, 500, function() {
    remove(number); 
  });
}

function remove(num){
  $( "#messsage"+num ).hide(6000, function() {
    $(this).remove();   
  });
}

Answer 2

jQuery's animation docs概述了您可以传递给.animate()的第四个参数 - complete

动画完成后调用的函数，每个匹配元素调用一次。

由于您有两个平行的动画，请选择持续时间最长的动画，然后您可以从中调用remove：

function slidebubble (number) {
  $('#message' + number).animate({'margin-left': '+=260'}, 500);
  $('#message' + number).animate({'opacity': 1}, {queue: false, duration: 1100}, null, function () {
    // called when animation is complete
    remove(number);
  });
}

function remove (number) {
  $('#message' + number).toggle(500).delay(1000).remove();

}

如何在删除之前切换<div>？

2 个答案: