关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法

时间:2023-03-09 20:18:37
关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法

  这几天在学jQuery,本身还只是一个新手,写了一个简单的动画——圆形头像的缩放。本身是用Firefox进行调试的,一切进行的很顺利,缩放可以按照预期执行,结果拿到IE上去之后,发现缩放动画失效了。后来百度了一些东西都没有找到关键所在,最后Google一下,找到了很多实用的解决方法,现在在这里总结一下,希望对有同样困惑的同学能够有所帮助。

可能的原因:

(1)jQuery版本过于陈旧。

  solution:

    更换新版本的jQuery包,但是更换之后记得测试你的代码,因为并不是所有的包都向后兼容。

(2)JavaScript定义的代码没有包含在ready函数当中,文档未就绪时就绑定事件函数导致绑定失败。

  solution:

    将非特殊的JS代码写在$(function(){})中,养成良好的编程习惯,也可以免去很多不必要的麻烦。

(3)JS代码没有写在专门的外部JS文件中而是在script标签中写JS代码时,注意代码的规范性。

  example:

    script标签中的type属性,如果这样写:

      <script type="text/javascript "></javascript>

    则会导致动画失效,因为javascript后面多了一个多余的空格。写代码时一定要注意代码的规范性,因为如果是因为这种问    题导致的bug会很难发现。规范书写代码,会省去很多不必要的麻烦。

(4)最大的一种可能性:IE禁用了脚本调试。

  solution:

    依次打开IE->工具->Internet选项->高级。在设置框中,找到“浏览”,把它下面的“禁用脚本调试(Internet Explorer)”去掉,然后应用,确定,刷新网页即可。如果还是不可行,可以尝试清除缓存后重新打开网页。

希望能够帮到大家!