只有在未与元素交互的情况下，我才能为其设置动画

How do I animate an element only if it has not been interacted with?

本文关键字：动画 设置 情况下 元素 交互      更新时间：2023-09-26

我想创建一个弹出窗口，当页面加载时它是可见的，但如果用户不与它交互，它将在一段时间后滑出屏幕。

这将使用jQuery，我已经找到了一个例子，但无法重新创建它

以下是示例站点：http://www.greatwolf.com/

你可以看到，如果没有与他们互动，他们的"预订住宿"弹出窗口将在几秒钟后关闭。但如果您在弹出窗口中选择了一个日期，它将不会关闭。

当然，我知道如何在延迟一段时间后制作动画。

 $('.side-res-widget-trigger').delay(3000).animate({
        left: parseInt($('.side-res-widget-trigger').css('left'),10) == 0 ?
            -$('.side-res-widget-trigger').outerWidth() :
            0
    });
    $('.side-res-widget').delay(3000).animate({
        left: parseInt($('.side-res-widget').css('left'),10) == 0 ?
            -$('.side-res-widget').outerWidth() :
            0
    });

但不确定如何在弹出窗口内部没有任何交互的情况下触发此操作。

您可以创建一个setTimeout()事件和一个控制变量来查看是否"交互"。否则，setTimeout将正常运行。类似于：

var interacted = false;
$('#myPopup').on("click", function() {
    interacted = true;
});
setTimeout(function() {
    if(!interacted) {
        //Hide process
    }
}, 3000);

如果'#myPopup'是弹出元素，则任何交互都会触发click事件。

相关文章：