javascript - 如何仅在未与元素交互时为其设置动画？

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 事件。