0

所以我创建了一些弹出代码，其中将包含来自在弹出窗口中单击的每个链接的特定信息。关闭后，弹出窗口中的内容将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/

4

3 回答 3

4

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

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

句法

.fadeOut（[持续时间] [，完成]）

小提琴

于 2013-06-15T07:53:57.930 回答
2

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

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

$window.fadeOut('slow', function() {
    $('#popupcontent span').remove();
  });
于 2013-06-15T07:54:25.240 回答
1

只需使用 setTimeout();

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

示例在这里

于 2013-06-15T07:54:56.820 回答