Question

所以我创建了一些弹出代码，其中包含弹出窗口中单击的每个链接的特定信息。关闭后，弹出窗口div中的内容会被删除。这是我的代码：

var $content = $('#popupcontent');
var $window = $('#popupwindow');
$('.open').click(function(){
    //alert('runnning');
    var a = $(this).contents('span');
    $content.append(a);
    $window.fadeIn(300);
});
$('.close').click(function(){
    //alert('running');
    var a = $content.contents('span');
    $window.fadeOut(300);
    $('#popupcontent span').remove();
});

我的问题是它在淡出之前以某种方式删除了内容，因此查看者可以看到弹出容器变为空白。我怎样才能使它一定会先淡出然后删除内容？这是一个Jsfiddle来说明：http://jsfiddle.net/kAdQK/4/

Answer 1

您可能希望利用fadeout方法的完整回调参数，在fadeout完成后删除元素。使用您当前的代码，它将启动淡出动画，然后立即删除内容，而无需等待淡出动画完成，因此您将获得您现在看到的视觉效果。使用回调，确保在动画完成后执行回调。

$window.fadeOut(300, function () {
        $('#popupcontent span').remove();
    });

Syntax

.fadeOut（[duration] [，complete]）

Fiddle

Answer 2

您可以使用动画完成功能在淡出结束后删除元素。

以下代码将确保#popupcontent仅在淡出后才会删除

$window.fadeOut('slow', function() {
    $('#popupcontent span').remove();
  });

Answer 3

只需使用setTimeout（）;

$window.fadeOut(300);
setTimeout(function(){
    $('#popupcontent span').remove();},2000);

Example Here

在Jquery中更改事件的顺序

3 个答案: