JQuery 动画无法正常工作

Question

过去几周我一直在尝试学习 JQuery，我想测试用 JQuery 制作一个“轮盘赌”动画，但我遇到了一个问题。

我制作了这个 JQuery 脚本

$(document).ready(function(){
    $("#roll").click(function(){
        $(".imageBox").animate({left: '250px'});
    });
});

但由于某种原因它不起作用，当我改变时

$(".imageBox").animate({ left: '250px' });

到

$(".rouletteBox").animate({ left: '250px' });

出于某种原因它可以工作，但我不希望它变成那样。

这是我的 JSFiddle https://jsfiddle.net/L7esjkzL/

在该 JSFiddle 上，您可以看到，如果将 .imageBox 更改为 .rouletteBox，则动画有效。

Answer 1

要尊重 left 值，您需要将 position 设置为默认值 static 以外的值，例如 相对:

.imageBox {
    /* other rules... */ 
    position: relative;
}

Updated fiddle