Html 在jquery中使用css边距设置div左右动画

第一次点击按钮时，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>

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“div”）.animate（{marginLeft:“300px”}）；
});
});
钮扣{
颜色：白色；
背景色：红色；
填充：10px 20px；
}
div{
显示：内联块；
宽度：150px；
高度：150像素；
背景颜色：黄色；
利润率：20px 50px；
}

HTML-

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

点击我
你好

要实现此目的，请使用

切换类（）

而不是

动画（）

在连续单击时添加/删除类。然后，您可以使用CSS中的

transition

来控制动画，它的性能远远优于JS。试试这个：

jQuery（$=>{
$（“按钮”）。单击（函数（）{
$（“div”）.toggleClass（“右”）；
});
});
按钮{
颜色：白色；
背景色：红色；
填充：10px 20px；
}
div{
显示：内联块；
宽度：150px；
高度：150像素；
背景颜色：黄色；
利润率：20px 50px；
过渡：边缘左侧300ms；
}
右分区{
左边距：300px；
}

点击我
您好
我特别想使用Jquery动画实现解决方案。我们可以使用Jquery动画@Rory McCrossan获得解决方案吗？请注意，该函数是vanilla JS，而不是Jquery。@OskarGrosser还有一个本机的
animate（）
方法，但这显然是在使用Jquery方法：我的错，我不知怎的认为
$（）
返回一个常规的
元素
-对象，不是
jQuery
-对象。你完全正确。但是本例中的
元素.animate（）
和
jQuery.animate（）
函数的工作原理完全相同。