如何在現有js代碼中添加淡入和淡出效果

Question

基本上，我有這段代碼可以掛接到網站中的某個元素上，並覆蓋其內容。 在此示例中，它覆蓋了現有文本以使其經常更改。 但是，當它遍歷預設文本行時，它只是跳而沒有動畫。 是否可以在預設文本之間添加淡入淡出動畫？

這是代碼：

    var text = ["Question Everything!", "Envision the future!", "Change your perspective!"];
    var counter = 0;
    var elem = document.getElementById("slogantxt");
    setInterval(change, 3500);

    function change() {
      elem.innerHTML = text[counter];
      counter++;
    if(counter >= text.length) { counter = 0; }
   }

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，您可以執行以下操作

var text = ["Question Everything!", "Envision the future!", "Change your perspective!"];
var counter = 0;
var elem = document.getElementById("slogantxt");
setInterval(change, 3500);
function change() {
 fade(elem,function(){
    elem.innerHTML = text[counter];
    unfade(elem);
 }); 
 counter++;
 if(counter >= text.length) { counter = 0; }
}


function fade(element,cbk) {
   var op = 1;  // initial opacity
   var timer = setInterval(function () {
       if (op <= 0.1){
           clearInterval(timer);
           element.style.display = 'none';
           cbk();
       }
       element.style.opacity = op;
       element.style.filter = 'alpha(opacity=' + op * 100 + ")";
       op -= op * 0.1;
   }, 50);
}

function unfade(element) {
   var op = 0.1;  // initial opacity
   element.style.display = 'block';
    var timer = setInterval(function () {
       if (op >= 1){
           clearInterval(timer);
       }
       element.style.opacity = op;
       element.style.filter = 'alpha(opacity=' + op * 100 + ")";
       op += op * 0.1;        
   }, 10);
}

參考： 如何使用JavaScript和CSS進行淡入和淡出