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

#javascript #jquery #анимация

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







 





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!








    

Ответы

Ответ 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;
}




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!




Ответ 2

[https://codepen.io/mario-web/pen/JJzaKB][1]

    

    

    .box{
      height: 100px;
      width: 100px;
      background: #000000;
      margin: 0px;
      position: relative;
      top: 0;
      left: 0;
    }

    $(function(){
      $('button').on('click', function(){
        var $box = $('.box');
          $box.animate({
            left: "150px"
          }, 1000)
          .animate({
            left: 0
          }, 1000)
      });
    });