如何延迟动画

Question

我有一个jQuery动画，它在.rope的点击功能上呈现窗帘打开和关闭

当页面加载完毕后窗帘自动打开

$(".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);

这将确保如果用户手动点击，那么它会取消“两秒钟后自动打开”的事情，否则可能会干扰;）