2015-04-13 4 views
0

Я сделал эту jquery анимацию. Кажется, что все работает нормально. Но я пытаюсь понять, как сделать кнопку сброса для этой анимации, чтобы вернуть ее в исходное состояние.Как сделать кнопку сброса для анимации 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> 

ответ

0

Вы можете попробовать это?

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

}); 
+0

Я пробовал на кнопку сброса не работает :( – Amoney21

+0

здесь посмотреть на эту jsfiddle HTTP:. // jsfiddle.net/q36quy1v/ – Sushil

Смежные вопросы