添加fadeIn和fadeOut

Question

如何在每个小时块中添加添加fadeIn和fadeOut jquery动画＆＃34;例如hn > 5 && hn < 12＆＃34;，＆＃34; hn > 11 && hn < 15＆＃34;等...在每个＆＃34; document.getElementById("compliments").innerHTML =＆＃34;？

之前和之后

我尝试使用用javascript编写的jQuery和fadeIn fadeOut函数，但我不能......我不知道为什么......

var q = 0;

var compliments = {
    morning:[
        "Buongiorno!",
        "Ti vedo in forma!",
        "Pronto per affrontare questa giornata?"
    ],
    lunch:[
        "Hai fame? Ehehe credo proprio di si!",
        "Buon pranzo!"
    ],
    afternoon:[
        "Sei stanco? Meglio se fai un riposino!",
        "Esci con gli amici?"
    ],
    evening:[
        "Pronto per uscire?",
        "Buona cena!"
    ],
    night:[
        "Buonanotte!",
        "Fai bei sogni!"
    ]
};

function updateComp(){
    var tn = new Date();
    var hn = tn.getHours(); 
    if (hn > 5 && hn < 12){
        if (q == Object.keys(compliments.morning).length){
            q = 0;
        }
        document.getElementById("compliments").innerHTML = compliments.morning[q];
        q++;
    }
    if (hn > 11 && hn < 15){
        if (q == Object.keys(compliments.lunch).length){
            q = 0;
        }
        document.getElementById("compliments").innerHTML = compliments.lunch[q];
        q++;
    }
    if (hn > 14 && hn < 19){
        if (q == Object.keys(compliments.afternoon).length){
            q = 0;
        }
        document.getElementById("compliments").innerHTML = compliments.afternoon[q];
        q++;
    }
    if (hn > 18 && hn < 23){
        if (q == Object.keys(compliments.evening).length){
            q = 0;
        }
        document.getElementById("compliments").innerHTML = compliments.evening[q];
        q++;
    }
    if (hn > 22 && hn < 6){
        if (q == Object.keys(compliments.night).length){
            q = 0;
        }
        document.getElementById("compliments").innerHTML = compliments.night[q];
        q++;
    }
}

updateComp();

setInterval(updateComp, (5*1000));

Answer 1

如果加载了JQuery，您应该可以执行以下操作：

var element = $("#compliments");
element.fadeOut(function(){
    element.innerHTML = compliments.morning[q];
    element.fadeIn();
});

你甚至可以把它包装在自己的函数中DRY

类似的东西：

function runUpdate(text){
    var element = $("#compliments");
    element.fadeOut(function(){
        element.innerHTML = text;
        element.fadeIn();
    });
}

然后在小时区内用document.getElementById("compliments").innerHTML = compliments.afternoon[q];替换runUpdate(compliments.morning[q]);。

更新

确保在尝试执行任何JQuery代码之前等到JQuery准备就绪：

  function updateComp(){
  .... 
  }

  $(function(){
    updateComp();
    setInterval(updateComp, (5*1000));
  });

Answer 2

您可以使用CSS过渡为您做繁重的工作。此示例使用秒来显示更有趣的内容。它需要迭代预热所以给它一两秒钟来启动： - ）

＆＃13;

＆＃13;

var q = 0;

var compliments = {
    morning:[
      "(morning) Buongiorno!",
      "(morning) Ti vedo in forma!",
      "(morning) Pronto per affrontare questa giornata?"
    ],
    lunch:[
      "(lunch) Hai fame? Ehehe credo proprio di si!",
      "(lunch) Buon pranzo!"
    ],
    afternoon:[
      "(afternoon) Sei stanco? Meglio se fai un riposino!",
      "(afternoon) Esci con gli amici?"
    ],
    evening:[
      "(evening) Pronto per uscire?",
      "(evening) Buona cena!"
    ],
    night:[
      "(evening) Buonanotte!",
      "(evening) Fai bei sogni!"
    ]
};

function updateComp(target){
  var tn = new Date();
  var hn = tn.getHours(); 
  var ss = tn.getSeconds();

  var comp = (function(ss, allComps){
    if (0 <= ss && ss <= 15) { return allComps.morning; }
    if (16 <= ss && ss <= 30) { return allComps.lunch; }
    if (31 <= ss && ss <= 45) { return allComps.afternoon; }
    if (46 <= ss && ss <= 60) { return allComps.evening; }
    return [""];
  })(ss, compliments);
  
  // ----------------
  // get the "next" compliment
  // ----------------
  q = q % Object.keys(comp).length;
  var currentComp = comp[q];
  q++;
  // ----------------
  
  // ----------------
  // fade the existing compliment then replace it and fade in.
  // ----------------
  var className = "ghost";
  var duration = 1000;

  target.classList.add(className);
  setTimeout(function(){
    target.innerText = currentComp;
    target.classList.remove(className);
  }, duration);
  // ----------------
}

setInterval(function(){
  var target = document.getElementById("compliments");
  updateComp(target);
}, 3 * 1000);

＆＃13;

#compliments { transition: opacity 1s ease-in-out; }

.ghost { opacity : 0; }

＆＃13;

<div id="compliments"></div>

＆＃13;

＆＃13;

＆＃13;