javascript - 带文字功能的动画

Question

我已经创建了 Jquery 插件倒计时计时器，所以我想为倒计时添加一些效果和动画，例如旋转或淡入淡出: 我需要的例子:
Animation Demo

注意:
我需要用天、小时、分钟和秒来制作动画

(function ($) {
    jQuery.fn.countdown = function (options, callback) {
        var settings = { 'date': null };
        if (options) {
            $.extend(settings, options);
        }
        this_sel = $(this);
        function count_exec() {
            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000);
            if (eventDate <= currentDate) {
                callback.call(this);
				clearInterval(interval);
			}
            seconds = eventDate - currentDate;
            days = Math.floor(seconds / (60 * 60 * 24));
            seconds -= days * 60 * 60 * 24;
            hours = Math.floor(seconds / (60 * 60));
            seconds -= hours * 60 * 60 ;
			minutes = Math.floor(seconds / 60);
			seconds -= minutes * 60;

            // add 0 value to left of value
			if (!isNaN(eventDate)) {
                this_sel.find('.days').text(days);
			    this_sel.find('.hours').text(hours);
			    this_sel.find('.mins').text(minutes);
			    this_sel.find('.secs').animate({ 'font-size': '100px' },1000).text(seconds);
			}
        }
        count_exec();
        interval = setInterval(count_exec, 1000);
    };
})(jQuery);
$(document).ready(function () {
    $("#countdown").countdown({
        date: "4 january 2017 7:15:00"
    },
    function () {
        $("#countdown").text("merry christmas");
    }
    );
}) 

#countdown{
                width:1000px;
                margin:50px auto;
                border:1px solid #14e170;
            }
            #countdown .countdown-container{
                width:25%;
                height:200px;
                float:left;
                position:relative;
                border:1px solid #14e170;
                text-align:center;
            }
            .countdown-container > div{
                text-align:center;
                font-size:100px;
            }
            .countdown-container > span{
                display:block;
                top:0;
                left:0;
                font-size:40px;
                color:rgba(73, 73, 73, 0.82);
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
        <div class="countdown-container">
            <div class="days">
                00
            </div>
            <span>Days</span>
        </div>
        <div class="countdown-container">
            <div class="hours">
                00
            </div>
            <span>Hours</span>
        </div>
        <div class="countdown-container">
            <div class="mins">
                00
            </div>
            <span>Minutes</span>
        </div>
        <div class="countdown-container">
            <div class="secs">
                00
            </div>
            <span>Seconds</span>
        </div>
    </div>

Answer 1

请访问此链接: http://www.jqueryscript.net/time-clock/Animated-Responsive-jQuery-Countdown-Timer-Plugin-mbCoimingsoon.html

只需下载这个倒计时，一切如您所愿。

希望对你有帮助