僅當元素未與之交互時，才如何為其設置動畫？

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