Question

我做了这个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>

Answer 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');
    });

});

如何为jquery动画制作重置按钮？

1 个答案: