如何延迟动画

Question

I have a jQuery animation which renders curtains opening and closing on the click function of .rope

When the page loads the curtains automatically open after adding

$(".rope").trigger('click');

to the end of the string.

The full code works great but when the page loads, I want it to delay for a few seconds before the curtains open, but not on the click. I've tried adding .delay(2000) before .animate and before .ready, I'm toying around with a setTimeout but I',m not sure where to put it or if it's even what I need. My javascript skills is pretty basic. Here is what I'm using. I just want to add the delay

jQuery(document).ready(function($) {

            $curtainopen = false;

            $(".rope").click(function(){
                $(this).blur();
                if ($curtainopen == false){ 
                    $(this).stop().animate({top: '0px' }, {queue:false, duration:500, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'60px'},2000 );
                    $curtainopen = true;
                }else{
                    $(this).stop().animate({top: '-40px' }, {queue:false, duration:500, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                    $curtainopen = false;
                }
                return false;
            });
            $(".rope").trigger('click');
        });

Answer 1

A timeout would be ideal for this, I think.

var autoOpen = setTimeout(function() {
    $(".rope").trigger("click");
},2000);

Be sure to add this just inside your $(".rope").click(...) function:

clearTimeout(autoOpen);

This will ensure that if the user clicks manually, then it cancels the "open automatically after two seconds" thing which might otherwise interfere ;)