如何实现不刷新页面，只重新加载js文件

2024-11-15 10:26:12

推荐回答（1个）

回答1：

我来还原一下场景：

a.animate({},function(){
b.animabe({})
})

假设你的页面大动画由两个小动画组成，大概是上面的样子。
动画改变的是什么？元素的样式。
element和js是分离的，你重新加载了js，也仅仅是覆盖了原来的变量方法而已，html的样式还是那个样子。
所以要复位画面，需要使用js去改变元素样式，这一步你逃不掉的。

取巧的办法是有的。
我设想你的页面为了兼容性等原因，没有使用css3来参与动画，而是使用动画框架比如jQuery的animate，而这些动画框架一般是通过动态改变标签内部的style来形成动画。
这说明，动画前后，变化的是标签内style属性。
比如从：

变化为

于是可以通过删除标签内的style属性来恢复，遍历一下所有你动画过的节点：
$elem.attr('style',"");
补充：后来我发现ie67中不能通过setAttribute来设置style，至于jQuery.attr没有试。可以先将jQuery对象转化为DOM对象，然后使用style.cssText='';来清空style。
前提是：动画前，这些元素都没有标签内style属性；动画过程中，你没有动态改变动画元素的className，而且动画元素的style也没有被其它程序修改过。