执行jquery的animate,然后恢复到执行前的状态

Question

html如下:
  <div id='test' style="height: 100px; width: 100px; background-color: Purple;">
    </div> 
<input id="Button3" type="button" value="测试按钮" onclick="forTest();" />
js如下:
   function forTest() {
            $('#test').animate({ left: "100", width: "13", opacity: "0.5", height: "199", fontSize: "67" }, "3000", null);
        }
问题:
能不能执行完forTest()方法后,testdiv能恢复到原始的状态?
或者说,或者说 必选在执行forTest()之前,保存一下状态,执行完后,在手动恢复?有其他简单的办法吗?jqueryjavascripthtml

Answer 1

试一下下面这样function forTest() {
var _csses = {
left : '',
width : '',
opacity : '',
height : '',
fontSize : ''
};
for(var i in _csses){
_csses[i] = $('#test').css(i);
}
console.log(JSON.stringify(_csses));
            $('#test').animate({ left: "100", width: "13", opacity: "0.5", height: "199", fontSize: "67" },{
duration:3000,
complete :function(){
for(var i in _csses){
$('#test').css(i , _csses[i]);
}
}
             });
        }

Answer 2

忘记把调试语句去掉了。console.log(JSON.stringify(_csses));