Блог

при первом нажатии на кнопку div должен анимироваться вправо на 300 пикселей. При нажатии 2-го раза на кнопку div должен анимироваться влево на 300 пикселей. то же самое для следующего щелчка.

Я пробовал, но он перемещается только влево, но как я могу переключиться, чтобы снова переместить div вправо?

код —

 <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({ marginLeft: "300px"});
            });
        });
 </script>

<style>
    button{
        color:white;
        background-color: red;
        padding: 10px 20px;
    }
    div{
        display: inline-block;
        width: 150px;
        height: 150px;
        background-color: yellow;
        margin: 20px 50px;
    }
</style>
  

HTML —

 <button>Click me</button>
<div>Hello</div>
  

Для достижения этой цели используйте toggleClass() вместо animate() добавления / удаления класса при последовательных щелчках мыши. Затем вы можете управлять анимацией с помощью transition CSS, который работает намного лучше, чем JS. Попробуйте это:

 jQuery($ => {
  $("button").click(function() {
    $("div").toggleClass('right');
  });
});  

 button {
  color: white;
  background-color: red;
  padding: 10px 20px;
}

div {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: yellow;
  margin: 20px 50px;
  transition: margin-left 300ms;
}

div.right {
  margin-left: 300px;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>
<div>Hello</div>  

Я специально хотел достичь решения с помощью анимации Jquery. Можем ли мы получить решение, используя анимацию Jquery

В этом случае вам нужно проверить, каково текущее поле, и установить новое значение на основе этого. Однако следует отметить, что описанный выше подход CSS на сегодняшний день является лучшей практикой для использования.

 jQuery($ => {
  $("button").click(function() {
    let margin = $('div').css('margin-left') == '50px' ? '300px' : '50px';
    $("div").animate({'margin-left': margin});
  });
});  

 button {
  color: white;
  background-color: red;
  padding: 10px 20px;
}

div {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: yellow;
  margin: 20px 50px;
  transition: margin-left 300ms;
}

div.right {
  margin-left: 300px;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>
<div>Hello</div>