jQuery动画无法在Safari和Chrome中正常运行

Question

嗨，我有一些步骤的表格。 我会在每个注册级别上设置步骤编号的动画。 我的动画在Firefox中工作正常，但在chrome和safari中却不支持。 这是因为left CSS属性。 以下是我的代码，您可以检查

这是HTML部分

<div class="steps">
        <p class="step1 active"><b>01</b></p>
        <p class="step2"><b>02</b></p>
        <p class="step3"><b>03</b></p>
        <p class="step4"><b>04</b></p>
        <p class="step5"><b>05</b></p>
    </div>

这是CSS

.steps{
    width:100%;
    height:2px;
    margin:40px 0 0 0;
    background:#f2b913;
    float:left;
    z-index:999999999999999999;
    position:relative;
}

.steps p{
    float:left;
    width:60px;
    position:absolute;
    height:60px;
    border-radius:50%;
    text-align:center;
    line-height:50px;
    color:white;
    background:#FFF;
    padding:2px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    margin:-30px 0 0 0px;
    cursor:pointer;
    border:3px solid #f2b913;
    font-size:20px;
}

.steps p b{
    width:100%;
    height:100%;
    float:left;
    border-radius:50%;
    background:#f2b913;
}

.steps p:hover b, .steps p.active b{background:#019084;;}

.step1{left:0;}
.step2{left:60px;}
.step3{left:120px;}
.step4{left:180px;}
.step5{left:240px;}

这是jQuery部分

$(document).ready(function (){
    $(".step1").css("left","auto").animate({"right":"0px"}, "slow");
    $(".step2").animate({"left":"0px"}, "slow");
    $(".step3").animate({"left":"60px"}, "slow");
    $(".step4").animate({"left":"120px"}, "slow");
    $(".step5").animate({"left":"180px"}, "slow");
});

Answer 1

对第一个元素进行一些调整：

.steps .step1{right: 100%; margin-right: -60px;}

JS：

$(document).ready(function (){
    $(".step1").animate({"right":"0px", 'marginRight': 0}, "slow");
    $(".step2").animate({"left":"0px"}, "slow");
    $(".step3").animate({"left":"60px"}, "slow");
    $(".step4").animate({"left":"120px"}, "slow");
    $(".step5").animate({"left":"180px"}, "slow");
});

演示

版本2：

可以再次修复愚蠢的Safari。

.steps .step1{ margin-right: 100%; right: -60px;}

这是唯一的更改。

演示