gpt4 book ai didi

javascript - jQuery:一起为元素位置和不透明度设置动画

转载 作者:行者123 更新时间:2023-11-28 12:16:37 33 4
gpt4 key购买 nike

我有一个 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;

如何解决这个问题?

这是 fiddle 。在两种浏览器中尝试一下,您会发现不同之处: http://jsfiddle.net/eJXLf/

.

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

这是它在 Chrome 和 Firefox 中的样子:

Chrome:................................................ ......... 火狐:

enter image description here ..................................... enter image description here

最佳答案

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

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

关于javascript - jQuery:一起为元素位置和不透明度设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21445709/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com