Question

添加css属性：

-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;

只使firefox（版本12）在jquery.animate（）

上采取不同的行为

只需点击两个图片之间的区别：http://jsfiddle.net/6Yj2f/1/

这种行为有解释吗？

Answer 1

我已经尝试过使用chrome 21和firefox 13，但我想其他浏览器会有所不同，我认为我会期待。

你在这里有一个两个缓和的“动画”总和，这就是你遇到问题的原因，这是因为jQuery通过内联样式逐渐改变宽度样式（其中XX随着时间）：

<img id="conflicted" class="handCard" src="https://path/to/image.jpg" style="display: inline-block; width: XXpx; ">

所以，你正在进行5秒的过渡，只是逐渐改变对象的宽度样式，如果没有CSS过渡设置，这很好，因为浏览器不会应用它自己的过渡。但是当你逐渐改变宽度样式同时还具有CSS过渡容易度（在你的情况下设置为1秒线性容易度）时，你正在使浏览器减轻宽度样式的每一个变化。如果你将CSS过渡容易度设置为0.1，你会看到jQuery如何改变宽度样式，浏览器也会改变它，它几乎会在同一时间。

我发现了一些有趣的"enhaced $.animation()"声称“扩展$ .animate（）来检测Webkit，Mozilla和Opera的CSS转换并自动转换动画。与IE6 +兼容”，我自己没试过，但是希望你会发现它很有用。

jQuery动画和转换冲突 - firefox

1 个答案: