Анимация JQuery. Как вернуть квадрат обратно?

356

03 июля 2017, 18:27

Как при втором нажатии на кнопку вернуть квадрат обратно? Код ниже.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script>  
$(document).ready(function(){ 
 
    $("button").click(function(){ 
        $("div").animate({left: '250px'}); 
    }); 
     
     
}); 
</script>  
</head> 
<body> 
 
<button>Start Animation</button> 
 
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> 
 
</body> 
</html>

Answer 1

используйте toggleclass и transition для плавности:

$("button").click(function(){ 
        $("div").toggleClass('move_right'); 
    });

div { 
  left: 0px; 
  transition: all .5s; 
  background:#98bf21; 
  height:100px; 
  width:100px; 
  position:absolute; 
} 
.move_right { 
  left: 250px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Start Animation</button> 
 
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
 
<div></div>