我的jQuery动画不会重新定位

Question

我试图在点击按钮时重新定位按钮，但我无法移动该死的东西...我可以重新缩放它，但它不会移动......

我的代码如下所示：

$('#test').on('click', function() {
    $(this).animate({
        left: '100px',
    }, 1000);
});

Answer 1

您需要将position设置为relative，absolute，fixed或sticky。

position: static是默认设置，指示浏览器忽略任何top / right / bottom / left属性。

$('#test').on('click', function() {
    $(this).animate({left: '100px'}, 1000);
});

#test {
  position: absolute;
  top: 0;
  left: 0;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">Click me!</div>

Answer 2

在jQuery v1.6.x及更低版本中，您可以为数字设置动画，而不是字符串，因此请使用：

$('#test').on('click', function() {
    $(this).animate({
        left: 100,
    }, 1000);
});

您还可以使用加号和减号添加或减少值：

$('#test').on('click', function() {
    $(this).animate({
        left: '+=100',
    }, 1000);
});

...这会将100px添加到当前值。