jQuery：动画元素位置和不透明度一起

Posted 2023-03-06

【中文标题】jQuery：动画元素位置和不透明度一起

【英文标题】：jQuery: animate element position and opacity toghether

【发布时间】：2014-02-22 02:52:04

【问题描述】：

我有 CSS 样式的 div 元素：

.somediv 
    display: block;
    width: 100px;
    height: 100px;
    background: #4679BD;
    position: absolute;
    top: 10px;
    left: 100px;
    opacity: 0;

我想用 jQuery 动画改变 div 的位置。同样在这个动画过程中，我需要改变不透明度。

我试图用这个 jQuery 脚本来做：

$('.somediv').animate(
  'top':'150px',
  'opacity':'1'
, 1000);

它在 Firefox 中按我的需要工作，但在 Chrome 位置动画不起作用。动画完成后 Div 立即改变位置。

P.S：如果我改为position:relative，那么它在两个浏览器中都可以正常工作，但我需要使用position:absolute;

如何解决这个问题？

这是小提琴。尝试在这两种浏览器中，您会发现不同：http://jsfiddle.net/eJXLf/

.

-----更新-----

这是它在 Chrome 和 Firefox 中的外观：

Chrome：....................... ......... 火狐：

....................

【问题讨论】：

对我来说 Chrome 和 FF 都一样。

请查看更新后的问题。

【参考方案1】：

这对我来说很难测试，因为我无法在我的 chrome 版本中复制它，但您可以尝试使用 marginTop 代替吗？

$('.somediv').animate(
  marginTop: '150px',
  opacity: 1
, 1000);

【讨论】：

感谢您的回答。该方法在所有版本的 chrome 中都给出了结果。

【参考方案2】：

对我来说在 Chrome 32.0.1700.76 中运行良好。位置和不透明度的动画都很流畅。

【参考方案3】：

看起来这是 Chrome 错误。

我使用的是 Chrome 33.0.1750.46 beta-m，但是当我在 Version 34.0.1812.0 中进行测试时，它可以正常工作。

感谢您的回复。