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");
                    });

Jquery - 效果+自动隐藏

3 个答案: