如何延迟动画

How to delay animation

本文关键字：动画 延迟 何延迟      更新时间：2023-09-26

我有一个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');
        });
我认为超时

是理想的选择。

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

请务必在 $(".rope").click(...) 函数中添加以下内容：

clearTimeout(autoOpen);

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

相关文章：