Question

第一次点击按钮

时，div应该向右移动300px。当第二次点击按钮div时，应向左移动300px。下次点击相同。

我已经尝试过，但是它只会向左移动，但是如何切换以将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>

在jQuery中使用CSS边距左右对div进行动画处理

1 个答案: