Question

我想创建一个在页面加载时可见的弹出框，但如果用户没有与之交互，它将在一段时间后滑出屏幕。

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

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

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

我知道如何在延迟的时间之后制作动画。

 $('.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()事件和一个控制变量，以查看是否＆＃34;互动＆＃34;。如果没有，setTimeout将正常运行。类似的东西：

var interacted = false;

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

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

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

如果元素尚未与元素交互，我该如何为元素设置动画？

1 个答案: