如何设置此简单倒计时的动画

Question

我有这个倒计时，我想动画这些数字，比如当它们改变时，数字翻转或一些花哨的过渡。

<div>Registration closes in <span id="time">05:00</span> minutes!</div>


function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
        timer = duration;
    }
}, 1000);
}

window.onload = function () {
var fiveMinutes = 60 * 5,
    display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};

我很感激任何帮助，谢谢你

Answer 1

更改为jquery

<div>Registration closes in <span id="time">05:00</span> minutes!</div>
    $(window).load(function(){

        duration=60*5;
        setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        $('#display').animate({'opacity': 0}, 400, function(){
        $(this).html(minutes + ":" + seconds).animate({'opacity': 1}, 400);    
    });    
        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);

    });