如何延迟动画

Question

我有一个jQuery动画，它在.rope的click函数上呈现打开和关闭窗帘

页面加载后，添加后窗帘自动打开

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

到字符串的末尾。

完整的代码很好用，但是当页面加载时，我希望它在窗帘打开之前延迟几秒钟，但不要单击。 我尝试在.animate和.ready之前添加.delay（2000），我想使用setTimeout，但是我不确定将其放置在哪里，或者甚至不是我需要的。 我的JavaScript技能非常基础。 这是我正在使用的。 我只想添加延迟

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

我认为，超时将是理想的选择。

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

确保将其添加到$(".rope").click(...)函数中：

clearTimeout(autoOpen);

这将确保如果用户手动单击，则将取消“两秒钟后自动打开”的操作，否则可能会干扰;）