Question

上面的当前jsfiddle显示2秒倒计时。想象一下，没有文字和数字。我试图找出答案：

a）我应该如何将某种类型的动画集成到js中，以便数字在当前计数时改变大小，颜色和位置（及时与其持续时间）。 Css3可以工作，但我需要它是基于javascript的，所以它适用于移动设备上的旧浏览器。

b）倒计时结束后，显示其他内容，就好像它是一个新页面，但仍然在同一个网址上。

任何反馈都非常感谢。

编辑：即使是一个很好的暗示，帮助我一路走来，甚至可能更好地帮助我自己解决问题。这只是缺乏语法知识，在js中有点像菜鸟。欢呼声

Answer 1

使用animate（）函数

var sec = 10
var timer = setInterval(function() {
    $('#hideMsg span').animate({
        opacity: 0.25,
        fontSize: '2em'
    }, 500, function() {
        $('#hideMsg span').css('opacity', 1);
        $('#hideMsg span').css('font-size', '1em');
        $('#hideMsg span').text(sec--);
    })

    if (sec == -1) {
        $('#hideMsg').fadeOut('fast');
        clearInterval(timer);
    }
}, 1000);

JSFiddle链接：http://jsfiddle.net/GNrUM/412/

Answer 2

我会看一下类似于这个库的东西：http://ricostacruz.com/jquery.transit/

它将在可用时使用CSS3过渡并执行优雅的后备。

关于添加位置，在执行此操作之前：

$('#hideMsg span').text(sec--);

我会执行所需的动画，并在动画的onfinish中执行上面的代码来更新计时器。

Answer 3

http://jsfiddle.net/GNrUM/410/

var sec = 10
var timer = setInterval(function() { 
    var color = sec > 5 ? "red" : "green";
   $('#hideMsg span').text(--sec).css("font-size", 10+sec*2 + "px").css("color", color);
   if (sec == 0) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);

这些值可能不是您想要的，但这为您提供了入门的基本想法。

Answer 4

我过去曾使用this jQuery plugin。它有onUpdate和onComplete个回调。您应该能够重新设置计数器onUpdate并隐藏它并加载一些内容onComplete。这对你有意义吗？

我觉得你需要倒计时，而不是起来，但你应该没有问题调整插件，因为它非常简单。

在Jquery倒数计时器上为每个数字设置动画

4 个答案: