Javascript 简单的fadein运行不平稳

我是jQuery和JS的初学者，我想用下面的代码制作一个简单的淡入动画。不幸的是，代码运行不平稳，尽管阅读了所有的基础知识（至少我认为是这样），但我无法让它平稳运行。有人能告诉我如何在动画中平滑淡入淡出的正确方向吗

我的所有元素在开始时都是可见的。我不想从隐藏元素开始，因为如果没有启用JS，这可能会导致我的UI出现问题

多谢各位

$(function () {
    $("#center_block").animate(
        {
            opacity: 0,
        }, 0, function () {
            $("#center_block").animate({
                opacity: 1,
            }, 250);
        });
});

---

我建议尽可能多地使用CSS动画，以获得最流畅的性能。一个让你开始学习的好图书馆是。要使用它，请在项目中包含css库，并使用javascript将预定义类添加到组件中。就你而言：

$('#center_block').addClass('animated fadeIn');

---

将在

#center_块中很好地淡入
元素。
如果您不想在禁用JS时隐藏元素，则需要先使用JS隐藏它们。此外，您目前使用的是250ms，这是难以置信的快，不太可能被用户感知到

$(document).on('ready', function(){
    $('#center_block').hide().fadeIn(250);
});

如果您的元素已具有
不透明度：0
对于CSS，则可以添加一个转换来处理动画：

#center_block{
    opacity: 0;
    transition: all .25s linear;
}

然后，只要满足触发条件，就更改不透明度的CSS值：

$('#center_block').css('opacity','1');

这里根本不需要JavaScript可以更轻松地实现这一点，并具有更好的性能（因为它们将利用GPU硬件加速）：


span{
字号：3em；
字体大小：粗体；
字体系列：Arial；
边框：1px纯灰；
背景色：aliceblue；
显示：内联块；
填充：10px；
不透明度：0；
/*配置元素以使用动画*/
动画：3s无限衰减；
}
@关键帧淡入淡出{
0%{不透明度：0；}
50%{不透明度：1；}
100%{不透明度：0；}
}
您好
如果您的计算机上的处理器速度较慢，或者您正在移动设备上查看javascript动画，则处理器可能无法处理动画。如果您使用CSS3动画，那么将使用内置浏览器硬件加速，这将更加高效

我所做的就是使用CSS3动画应用淡入淡出


@关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
#中心块{
动画：1s放松fadeIn；
}
看看我，我是Mr Center Block
你会如何淡入已经可见的内容？请在你的问题中添加相关的HTML和CSS。就我个人而言，我会使用CSS转换，而不是Javascript来完成这么简单的事情。利用硬件加速，它们更加平滑，编码也更加简单。@Bricky我认为他首先使用了
opacity:0
使其不可见。但他没有使用
display:none
@RobertWade CSS转换在加载时不起作用，即使您在加载时应用了带有javascript的类。最好使用CSS3动画来重现这个例子。如果动画应该自动发生，则不需要触发器。而且，CSS动画现在得到了广泛的支持，所以供应商的前缀可以全部删除。谢谢！因为这正是我想要达到的。@Claude没问题。斯科特·马库斯的建议使它更有效率。一定要检查Scotts代码，因为它们为您将来可能遇到的不同情况提供了很好的示例。非常感谢您，这些动画非常精彩。我现在决定了。fadein{opacity:0；动画：250ms向前淡入；}@keyframes淡入{0%{opacity:0；}100%{opacity:1；}}@Claude欢迎你。别忘了投票选出所有有用的答案，如果你觉得这个答案最能回答你的问题，请将其标记为“最佳”答案。很抱歉，我只能选择一个答案，我已经选择了WizardCoder提供的答案，因为它是现场的。但请放心，你的动画给了我很大的灵感，我的项目！非常感谢。试过了，不幸的是，div先出现了，然后消失了，然后消失了。我现在想要一个平滑的体验，不管电脑有多坏。非常感谢。p、 我选择了250毫秒，因为它应该只是一个很好的加载效果，但不会以任何方式打扰用户或与用户“交互”。Google material design建议fadeins上的时间间隔不要超过250ms。谢谢！我直接应用这个类，因为我总是想在pageload上运行效果。css很棒。我在项目的其他地方使用过它。