Затухающий текст на таймере обратного отсчета

Question

Недавно я был назначен ответственным за создание страницы обратного отсчета для запуска игры. Теперь у меня есть простой файл javascipt обратного отсчета, сделанный от this tutorial, но я хотел бы сделать его немного более фантастическим. Я хотел бы найти способ заставить числа исчезать до следующего, просто чтобы сделать его немного менее «рывком». Есть простой способ сделать это? Я googled вокруг и на самом деле не нашел простой способ.

Вот JS:

function updatetimer() { 
    now = new Date(); 
    launch = Date.parse("August 20, 2013 12:00:00"); 
    diff = launch - now; 

    days = Math.floor(diff/(1000*60*60*24)); 
    hours = Math.floor(diff/(1000*60*60)); 
    mins = Math.floor(diff/(1000*60)); 
    secs = Math.floor(diff/1000); 

    dd = days; 
    hh = hours - days * 24; 
    mm = mins - hours * 60; 
    ss = secs - mins * 60; 

    document.getElementById("timer") 
    .innerHTML = 
     dd + ' days ' + 
     hh + ' hours ' + 
     mm + ' minutes ' + 
     ss + ' seconds'; 
} 
setInterval('updatetimer()', 1000); 

А на странице есть просто пустой DIV с именем "таймер".

Answer 1

Вот быстрая и грязная версия с использованием CSS3 с двумя элементами перекрестного замирания. Fiddle Here

CSS:

.readyToFade{-webkit-transition: opacity 1s ease-out; 
      -moz-transition: opacity 1s ease-in-out; 
      -o-transition: opacity 1s ease-in-out; 
      -ms-transition: opacity 1s ease-in-out; 
       transition: opacity 1s ease-in-out; 
} 
.fadeOut{ 
      opacity: 0; 
} 

И разметки содержит 2 элемента. Javascript здесь ROUGH, но вы получаете картину.

function updatetimer() { 
var el; 
var el2; 
if (document.getElementById('timer').className != 'readyToFade fadeOut'){ 
    console.log("yay"); 
    el = document.getElementById('timer2'); 
    el2 = document.getElementById('timer'); 

} else { 
    console.log("no"); 

    el = document.getElementById('timer'); 
    console.log(el.className); 
    el2 = document.getElementById('timer2'); 
} 


console.log(el); 
now = new Date(); 
launch = Date.parse("August 20, 2013 12:00:00"); 
diff = launch - now; 

days = Math.floor(diff/(1000*60*60*24)); 
hours = Math.floor(diff/(1000*60*60)); 
mins = Math.floor(diff/(1000*60)); 
secs = Math.floor(diff/1000); 

dd = days; 
hh = hours - days * 24; 
mm = mins - hours * 60; 
ss = secs - mins * 60; 

el.innerHTML = 
    dd + ' days ' + 
    hh + ' hours ' + 
    mm + ' minutes ' + 
    ss + ' seconds'; 

el2.className = "readyToFade fadeOut"; 

el.className = "readyToFade initial"; 

} 
setInterval(function(){ 
    updatetimer(); 
},1000); 

Answer 2

Вы можете использовать Jquery FADEOUT

$("button").click(function(){ 
$("p").fadeOut(); 
}); 

Answer 3

Попробуйте this.The код не тестировался, хотя.

function updatetimer() { 
    $("#timer").fadeIn(); 
    now = new Date(); 
    launch = Date.parse("August 20, 2013 12:00:00"); 
    diff = launch - now; 

    days = Math.floor(diff/(1000*60*60*24)); 
    hours = Math.floor(diff/(1000*60*60)); 
    mins = Math.floor(diff/(1000*60)); 
    secs = Math.floor(diff/1000); 

    dd = days; 
    hh = hours - days * 24; 
    mm = mins - hours * 60; 
    ss = secs - mins * 60; 

    document.getElementById("timer") 
    .innerHTML = 
     dd + ' days ' + 
     hh + ' hours ' + 
     mm + ' minutes ' + 
     ss + ' seconds'; 
    $("#timer").fadeOut(); 
} 
setInterval('updatetimer()', 1000);