使用 jquery 中的 css 边距为 div 左右设置动画

Question

第一次点击按钮时，div 应该向右移动 300 像素。在按钮 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>

Answer 1

要实现这一点，请使用toggleClass() 而不是animate() 在连续单击时添加/删除类。然后你可以在 CSS 中使用transition 来控制动画，这比 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 Animation 来实现解决方案。我们可以使用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>