javascript - 强制jQuery在fadeIn()之前识别某些属性

Question

我有一堆<div class="circle">...</div>我计划在它们淡入时将它们动画化到它们的最终位置，就好像它们是粒子效果一样。

在我的 javascript 中，我有以下内容：

$(document).ready(function(){

allCircles = $(".circle");

for (var i = 0; i < allCircles.length; i++) {
    console.log('hello: ' + allCircles[i].offsetTop + ' , ' + allCircles[i].offsetLeft);
}

allThings = $("*");
allThings.fadeIn(2500);

for (var i = 0; i < allCircles.length; i++) {
    console.log('hello: ' + allCircles[i].offsetTop + ' , ' + allCircles[i].offsetLeft);

offsetTop 和 offsetLeft（在 css 文件中定义）是它们的最终位置。在 for 循环中，我注意到在 fadeIn 之前，offsetTop 和 offsetLeft 属性都为零。只有在fadeIn 事件被触发后，css 偏移属性才会生效。为什么 jQuery 会在动画淡入之前将所有内容归零？

Answer 1

如果您的圈子display: none在它们淡入之前就在您的 CSS 中，那么您将不会获得任何位置偏移。我会建议做opacity: 0和使用.animate({opacity: 1})。