我将如何为 jquery 动画制作一个重置按钮？

【问题标题】：How would I make a reset button for the jquery animation?我将如何为 jquery 动画制作一个重置按钮？
【发布时间】：2015-04-13 23:48:56
【问题描述】：

我制作了这个 jquery 动画。一切似乎都很好。但我正试图弄清楚如何为这个动画制作一个重置按钮，以便让它回到它的起始状态。

<!DOCTYPE html>
<html>
<head>
<script    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 

$(document).ready(function(){ 
$("button").click(function(){ 
var div = $("div"); 
div.animate({left: '100px'}, "slow"); 
div.animate({fontSize: '3em'}, "slow"); 
}); 
}); 
</script> 
</head> 
<body> 

<button>Animate!</button> 
<div  style="background:#33CCFF;height:100px;width;200px;position:absolute;">HELLO     WORLD!</div>
</body> 
</html>

【问题讨论】：

标签： jquery animation reset

【解决方案1】：

你可以试试这个吗？

html

<button id='animate'>Animate!</button> 
<div  class='initialStyle'>HELLO     WORLD!</div>
<button id='reset'>Reset</button>

css

.initialStyle{
    background:#33CCFF;
    height:100px;
    width;200px;
    position:absolute;
}

jquery

$(document).ready(function() {
    $("#animate").click(function() {
        var div = $("div");
        div.animate({
            left: '100px'
        }, "slow");
        div.animate({
            fontSize: '3em'
        }, "slow");
    });

    $("#reset").click(function() {
        $('.initialStyle').removeAttr('style');
    });

});

【讨论】：