Javascript为动画添加延迟答案

【问题标题】：Javascript add delay to animateJavascript为动画添加延迟
【发布时间】：2014-10-07 03:19:23
【问题描述】：

我一直在尝试为我的一个 JavaScript 动画添加延迟，但我得到的只是一个错误，上面写着 “对象不支持属性或方法‘延迟’”。顺便说一下，我正在测试 IE 8 的兼容性。

以下是我尝试过的上述代码。

来自

$('a',$(this)).stop().animate({'marginTop':'200'},1000);

到

$('a',$(this)).stop().delay(1000).animate({'marginTop':'200'},1000);

这里是jsfiddle。

最好的问候，

弗农

【问题讨论】：

什么要延迟？？...日历在小提琴？？
是的，我忘了说，我的错。

标签： javascript jquery animation jquery-animate delay

【解决方案1】：

你的小提琴有两个主要问题：

1) 动画代码设置在jQuery之前。这就是您在控制台中获得TypeError: $ is not defined 的原因。在您的代码之前的<head> 中包含 jQuery，并且没有任何包装函数：

<head>
    ....
    <script>
        /* jQuery here */
    </script>
    <script>
        $(function() {
            /* your code here */
        });
    </script>
    ....
</head>

2) 您使用的是非常旧的 jQuery version1.3.2，没有延迟功能。这就是为什么您在调用.delay() 时会收到TypeError: undefined is not a function。要么使用更新版本的 jQuery (>= 1.4.3)，要么自己定义延迟函数：

$(function() {
    // original $.fn.delay copied from jQuery v1.4.3 source:
    jQuery.fn.delay = function( time, type ) {
        time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
        type = type || "fx";
        return this.queue( type, function() {
            var elem = this;
            setTimeout(function() {
                jQuery.dequeue( elem, type );
            }, time );
        });
    };
    /* Your code here now works with .delay() */
});

更新FIDDLE here，插入延迟1500。

【讨论】：

感谢您的帮助！在我的动画上方定义延迟函数就成功了！

【解决方案2】：

这样的？

$(function(){$('a','body').on('click',function(e){
        e.preventDefault();
        $(this).delay(1000).animate({marginTop:'200px'},1000);
    })
});

见小提琴：http://jsfiddle.net/7hxv3kd4/2/

【讨论】：

不幸的是没有，我刚刚意识到jsfiddle没有正确显示动画，基本上当我将鼠标悬停在日历上时，它会向上滑动，当鼠标移开时，它会向下滑动，延迟是滑动回落，所以它会在滑回之前等待一秒钟。
您希望在mouse click 或over 和out 事件上播放动画？...动画应该在什么时候发生，什么时候不发生？

【解决方案3】：

我对代码做了以下两处修改，

替换</br> to <br/>
在 JSFiddle 的框架和扩展部分添加了 Jquery library

我相信它工作正常，请参考：http://jsfiddle.net/7hxv3kd4/3/

【讨论】：

如果 JSFiddle 被关闭 2-3 天，或者它删除了匿名小提琴，这个答案将是不完整的，将不再帮助其他任何人。也许你想包括你主要做了什么。请更改您的答案。
这就是为什么我提到了我在列表中所做的所有更改。让我知道答案是否具有误导性。
你用了什么插件，为什么？
抱歉，它实际上是 Jquery 库，我添加了它，因为控制台中似乎有许多与 Jquery 函数相关的未定义错误。