添加fadeIn和fadeOut

Question

如何在每个“document.getElementById("compliments").innerHTML =”之后的每个小块“像hn > 5 && hn < 12”，“hn > 11 && hn < 15”等......中添加添加fadeIn和fadeOut jquery动画？

我试图用JavaScript编写的jQuery和淡入淡出功能，但我不能......我不知道为什么......

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(); 
    }); 
} 

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

UPDATE

确保你等到jQuery是试图执行任何jQuery代码前准备：

function updateComp(){ 
    .... 
    } 

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

Answer 2

您可以使用一个CSS过渡到做繁重你。此示例使用秒来显示更有趣的内容。这需要一个迭代热身所以给它一个或两个秒的:-)踢

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);

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

 
.ghost { opacity : 0; }

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