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以外的值，例如relative：

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

Updated fiddle