Question

我是jQuery和JS的初学者，我想使用以下代码简单地淡化动画。不幸的是，代码运行不顺畅，尽管阅读了所有基础知识（至少我认为是这样），但我无法顺利运行。任何人都能指出我如何在动画中平滑淡出的正确方向吗？

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

谢谢。

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

Answer 1

这里根本不需要JavaScript。 CSS animations 可以通过更好的性能更轻松地完成此操作（因为它们将利用GPU硬件加速）：

＆＃13;

span { 
 font-size:3em;
 font-weight:bold;
 font-family:Arial;
 border:1px solid grey;
 background-color:aliceblue;
 display:inline-block;
 padding:10px;
 opacity:0;
 
 /* Configure the element to use the animation */
 animation: 3s infinite fade;
}

@keyframes fade {
 0% { opacity:0; }
 50% { opacity:1; }
 100% { opacity:0; }
}

＆＃13;

<span>Hello</span>

＆＃13;

或者，如果您不希望动画是自动的并且具有某种触发器，那么只需在适当的时间向对象添加CSS类：

＆＃13;

document.querySelector("button").addEventListener("click", function(){
  document.querySelector("span").classList.add("animate");
});

＆＃13;

span { 
 font-size:3em;
 font-weight:bold;
 font-family:Arial;
 border:1px solid grey;
 background-color:aliceblue;
 display:inline-block;
 padding:10px;
 opacity:0;
}

.animate {
 /* Configure the element to use the animation */
 animation: 3s infinite fade;
}

@keyframes fade {
 0% { opacity:0; }
 50% { opacity:1; }
 100% { opacity:0; }
}

＆＃13;

<button>Click to Start</button>
<span>Hello</span>

＆＃13;

Answer 2

如果您的计算机上处理器速度较慢，或者您正在查看移动设备的javascript动画，则处理器可能无法处理动画。如果您使用CSS3动画，则使用内置浏览器硬件加速，这样效率更高。

我正在做的就是使用CSS3动画来应用淡入淡出。

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity:1;
  }
}

#center_block {
  animation: 1s ease-out fadeIn;
}

<div id="center_block">Look at me, I'm Mr Center Block</div>

Answer 3

我建议尽可能使用CSS动画以获得最流畅的性能。一个很棒的图书馆可以帮助您入门animate.css。要使用它，请在项目中包含css库，并使用javascript将预定义的类添加到组件中。在你的情况下：

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

会很好地淡化#center_block元素。

Answer 4

如果您不想隐藏JS被禁用的元素，那么您需要先使用JS隐藏它们。此外，您目前正在使用250毫秒，速度极快，用户不太可能感知到。

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

如果你的元素已经有了opacity: 0;的CSS，那么你可以添加一个过渡来处理动画：

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

然后在满足触发条件时更改不透明度的CSS值：

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

简单的fadein运行不顺畅

4 个答案: