jquery animate 在 safari 和 chrome 中不能正常工作答案

【问题标题】：jquery animate not working in safari and chrome properlyjquery animate 在 safari 和 chrome 中不能正常工作
【发布时间】：2014-06-01 17:26:53
【问题描述】：

您好，我有一个包含一些步骤的表格。我为每个注册级别的步骤编号设置动画。我的动画在 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");
});

【问题讨论】：

这不行吗？ jsfiddle.net/3X695
没有。 step1 也应该从左到右进行动画处理。因为在 css 中左边是 0px，它应该改为 right:0px
唯一的问题是它会立即移动，如果您在本地 Firefox 浏览器上查看，您会看到实际的动画

标签： javascript jquery html css google-chrome

【解决方案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

【讨论】：

为越野车添加了修复。