How do I animate an element only if it has not been interacted with?

Question

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.

Here is the example site: 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.

Answer 1

You can create a setTimeout() event, and a control variable to see if is "interacted". If not, setTimeout will run normally. 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.