jquery Animate() 在 Firefox 中不起作用

Question

我的动画在 Chrome 和 Safari 中运行良好，但在 Firefox 中运行不佳。我的 jquery 代码是

HTML

<ul id="clientlist">
    <li name="clientitem0" class="clientitem">
        <div id="client0" class="client shadow">
            <img src="images/work/bbc.jpg" border=0>
            <p>National BBC</p>
            <a href="bbc.co.uk">
                <div class="website"></div>
            </a>
        </div>
    </li>
</ul>

脚本

$("li[name^='clientitem']").each(function(index) {
    $(this).delay(200*index).fadeIn();
    $("#client"+index).delay(200*index).animate({"top": "0px"}, "slow");
});

CSS

.client {
    position: relative; 
    top: 50px; 
    border: 1px solid #303234;
    background: #181B1D;
    -webkit-transition: -webkit-transform 0.2s linear;
}

Answer 1

您已为 webkit 引擎浏览器(例如 Safari、Chrome 等)添加了 transition 效果... )。您需要为其他引擎添加类似的内容:

.client {
    position: relative; 
    top: 50px; 
    border: 1px solid #303234;
    background: #181B1D;
    -webkit-transition: -webkit-transform 0.2s linear;
    -moz-transition: -moz-transform 0.2s linear; 
    -ms-transition: -ms-transform 0.2s linear;  
    -o-transition: -o-transform 0.2s linear;  
    transition: transform 0.2s linear; 
}