由于CSS转换持续时间的原因，jQuery中元素的隐藏和褪色行为异常

我有一个元素（一个圆圈），我想添加到页面并淡入。我使用以下jQuery来实现这一点：

var circle = $("<div id=\"circle\"></div>");
circle.hide();
circle.appendTo("body");
circle.fadeIn(1000);

var circle=$（“”）；
圈。隐藏（）；
圆圈。附于（“主体”）；
圆圈。法代因（1000）；

一开始这很好。然后，我将一些CSS添加到圆圈中，以在其悬停或单击时更改其大小，并通过添加

过渡持续时间：0.2s使其具有动画效果到圆圈

现在，当淡入发生时，圆圈立即出现，稍微淡出，然后淡入；大概是因为
circle.hide（）使用其转换持续时间

有没有一种简单的方法可以：

添加最初隐藏的圆形元素并使其淡入，或
在jQuery中处理圆大小的动画，而不是使用CSS
尝试在该函数的最后添加一个短超时，然后向循环中添加一个类。该类将具有所有CSS转换。因此，不存在任何干扰的可能性，因为在初始fadein完成之前，圆不会有任何过渡

      setTimeout(function() {
         circle.addClass('active');
      }, 300);

尝试在该函数的最后添加一个短超时，然后在循环中添加一个类。该类将具有所有CSS转换。因此，不存在任何干扰的可能性，因为在初始fadein完成之前，圆不会有任何过渡

      setTimeout(function() {
         circle.addClass('active');
      }, 300);

不确定这是最好且简单的方法，但它可以在不改变任何其他内容的情况下工作：您可以从css中删除
转换持续时间
，然后在
fadeIn
方法完成后使用jquery进行设置

var circle = $("<div id=\"circle\"></div>");
circle.hide();
circle.appendTo("body");
circle.fadeIn(1000, function() {
    circle.css('transition-duration', '0.2s');
});

var circle=$（“”）；
圈。隐藏（）；
圆圈。附于（“主体”）；
circle.fadeIn（1000，函数（）{
css（'transition-duration'，'0.2s'）；
});
不确定这是最佳且简单的方法，但它可以在不改变任何其他内容的情况下工作：您可以从css中删除
转换持续时间
，然后在
fadeIn
方法完成后使用jquery设置它

var circle = $("<div id=\"circle\"></div>");
circle.hide();
circle.appendTo("body");
circle.fadeIn(1000, function() {
    circle.css('transition-duration', '0.2s');
});

var circle=$（“”）；
圈。隐藏（）；
圆圈。附于（“主体”）；
circle.fadeIn（1000，函数（）{
css（'transition-duration'，'0.2s'）；
});
您可以在CSS
转换属性中设置更严格的限制。

目前，仅设置
转换持续时间：0.2s
类似于设置
转换：all.2s ease

您可以选择仅设置所需的动画：


var circle=$（“”）；
圈。隐藏（）；
圆圈。附于（“主体”）；
圆圈。法代因（1000）
html{
背景色：#000；
}
#圈{
边界半径：50px；
宽度：100px；
高度：100px；
背景色：#fff；
/*就换这一行*/
过渡：宽度.2s，高度.2s，边界半径.2s；
光标：指针；
位置：绝对位置；
保证金：自动；
排名：0；
右：0；
底部：0；
左：0；
}
#圆圈：悬停{
边界半径：60px；
宽度：120px；
高度：120px；
}
#圆圈：活动{
边界半径：55px；
宽度：110px；
高度：110px；
}
您可以在CSS
转换属性中设置更严格的限制。

目前，仅设置
转换持续时间：0.2s
类似于设置
转换：all.2s ease

您可以选择仅设置所需的动画：


var circle=$（“”）；
圈。隐藏（）；
圆圈。附于（“主体”）；
圆圈。法代因（1000）
html{
背景色：#000；
}
#圈{
边界半径：50px；
宽度：100px；
高度：100px；
背景色：#fff；
/*就换这一行*/
过渡：宽度.2s，高度.2s，边界半径.2s；
光标：指针；
位置：绝对位置；
保证金：自动；
排名：0；
右：0；
底部：0；
左：0；
}
#圆圈：悬停{
边界半径：60px；
宽度：120px；
高度：120px；
}
#圆圈：活动{
边界半径：55px；
宽度：110px；
高度：110px；
}