仅当元素未与之交互时，才如何为其设置动画？

Question

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

这将使用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
    });

但是不能确定如何仅在弹出窗口内部没有任何交互时触发此操作。

Answer 1

您可以创建一个setTimeout()事件和一个控制变量以查看是否被“交互”。 否则， setTimeout将正常运行。 就像是：

var interacted = false;

$('#myPopup').on("click", function() {
    interacted = true;
});

setTimeout(function() {
    if(!interacted) {
        //Hide process
    }
}, 3000);

在'#myPopup'是您的弹出元素的情况下，任何交互都会触发click事件。