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

jquery动画不适合在safari和chrome中工作

1 个答案: