[英]How do I animate an element only if it has not been interacted with?
I want to create a popout that is visible when the page loads but if the user does not interact with it, it will slide off screen after a set amount of time. 我想创建一个弹出页面,当页面加载时可见,但是如果用户不与之交互,则它将在设置的时间后滑出屏幕。
This would be using jQuery and I have found an example but been unable to recreate it. 这将使用jQuery,但我找到了一个示例,但无法重新创建它。
Here is the example site: http://www.greatwolf.com/ 这是示例网站: http : //www.greatwolf.com/
You can see their "Book Your Stay" popout will close after a few seconds if it has not been interacted with. 如果未与他们互动,您会看到他们的“预订您的住宿”弹出窗口将在几秒钟后关闭。 but if you select a date within the popout it will not close.
但是如果您在弹出窗口中选择一个日期,它将不会关闭。
I know how to make something animate after a delayed time of course. 我当然知道在延迟的时间后如何制作动画。
$('.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
});
But unsure how to only trigger this if nothing has been interacted with inside the popout. 但是不能确定如何仅在弹出窗口内部没有任何交互时触发此操作。
You can create a setTimeout()
event, and a control variable to see if is "interacted". 您可以创建一个
setTimeout()
事件和一个控制变量以查看是否被“交互”。 If not, setTimeout
will run normally. 否则,
setTimeout
将正常运行。 Something like: 就像是:
var interacted = false;
$('#myPopup').on("click", function() {
interacted = true;
});
setTimeout(function() {
if(!interacted) {
//Hide process
}
}, 3000);
Where '#myPopup'
is your popup element, any interaction would trigger the click
event. 在
'#myPopup'
是您的弹出元素的情况下,任何交互都会触发click
事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.