Jquery - effect +自动隐藏

Question

我正在使用jquery来激活我的网站，但是我有一些行为上的小问题：

我有一个div，它突然出现在页面的顶部，并摇晃：

$(minipopup).animate({
    marginTop: '+=' + (240) + 'px'
}, 1000);

$(minipopup).effect("shake");

这个迷你弹出窗口有一个X来关闭它，否则，它将在几秒钟后自动关闭：

setTimeout(function() {
        $('#minipopup').effect("explode");          
                    }, 10000); 

$('#closePopup').click(function() {
        $('#minipopup').effect("explode");
                    });

一切正常，除了，如果用户单击CLOSE按钮，他会看到爆炸效果，弹出窗口实际上消失了，但在10秒后(我在setTimeout下定义的)，用户再次看到弹出窗口爆炸(只是效果，因为弹出窗口在视觉上不在那里)。如果用户已经手动关闭弹出窗口，我如何避免“幽灵”爆炸？

提前谢谢。

Answer 1

您可以稍微更改一下单击处理程序，如下所示：

$('#closePopup').click(function() {
   $('#minipopup').effect("explode", function() {
     $(this).remove();
   });
});

如果您不再需要该元素，则可以使用此方法。

或者，如果您再次需要该元素，则告诉setTimeout()函数仅在使用:visible selector时该元素仍然可见时才执行此效果，如下所示：

setTimeout(function() {
    $('#minipopup:visible').effect("explode");          
}, 10000); 

在这两种情况下，选择器将停止匹配您不想再为其添加动画的元素。

Answer 2

将setTimeout设置为变量，如下所示：

var timer = setTimeout(function() {
    $('#minipopup').effect("explode");          
                }, 10000);

然后，在单击事件中，使用clearTimeout取消超时：

$('#closePopup').click(function() {
        $('#minipopup').effect("explode");
        clearTimeout(timer);
                    });

Answer 3

当用户关闭弹出窗口时，您需要清除计时器。

var timer =setTimeout(function() {
        $('#minipopup').effect("explode");          
                    }, 10000); 

$('#closePopup').click(function() {
        clearTimeout(timer);
        $('#minipopup').effect("explode");
                    });