javascript - jquery 动画无法在 safari 和 chrome 中正常工作

Question

您好，我有一个包含一些步骤的表格。并且我在每个注册级别上设置了步骤编号的动画。我的动画在 firefox 中运行良好，但在 chrome 和 safari 中不支持。这是因为 css 属性 left。以下是我的代码，您可以查看

这是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");
});

Demo

版本 2:

再次修复愚蠢的 Safari。

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

这是唯一的变化。

Demo