Question

基本上我有这个代码挂钩到网站中的某个元素并覆盖它的内容。在这个例子中，它覆盖了现有的文本，使其经常变化。然而，当它循环通过预设的文本行时，它只是跳转而没有动画。是否可以在预设文本之间添加淡入淡出动画？

以下是代码：

static void displayOctal(int n) { //n = 100
   if(n>0) {
      if(n/8>0) {
         displayOctal(n/8);
      }
      System.out.println(n%8); //prints 144
   }
}

Answer 1

CSS3 @keyframes动画在这里的重量要轻得多。

@keyframes fadeOutIn {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeOutIn {
  animation-name: fadeOutIn;
  animation-duration: 200ms;
 }

然后在更改内部HTML时删除并重新添加类。

编辑：为简单起见，我遗漏了必要的-webkit-前缀。别忘了！

Answer 2

使用 jQuery ，您可以执行以下操作：

$(document).ready(function(){
  var text = ["Question Everything!", "Envision the future!", "Change your perspective!"];
  var counter = 0;
  setInterval(change, 3500);
  function change() {
     $("#slogantxt").fadeOut('fast',function(){//fade out the element
         $(this).html(text[counter]).fadeIn('fast');//once fade out completes, change the element text and fade it back in
     });

     counter++;
     if(counter >= text.length) { counter = 0; }
   }
});

Answer 3

使用JS，您可以执行以下操作

{{1}}

参考：How to do fade-in and fade-out with JavaScript and CSS

如何为现有的js代码添加淡入和淡出效果

3 个答案: