Question

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

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

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

到字符串的末尾。

完整的代码效果很好但是当页面加载时，我希望它在窗帘打开之前延迟几秒钟，但不是在点击上。我尝试在.animate之前和之前添加.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);

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

如何延迟动画

1 个答案: