1

http://jsfiddle.net/GNrUM/

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

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

b) 倒计时完成后显示其他内容，就好像它是一个新页面但仍然在相同的 url 上。

非常感谢任何反馈。

编辑：即使是一个很好的提示来帮助我，也可能更好地帮助我自己解决这个问题。只是缺乏语法知识，在 js 中有点菜鸟。干杯

4

4 回答 4

6

使用 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/

于 2012-09-11T15:52:37.917 回答
0

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

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

至于在哪里添加它，在你这样做之前：

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

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

于 2012-09-11T15:38:27.520 回答
0

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

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

于 2012-09-11T15:46:08.797 回答
0

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

我看到你需要倒计时，而不是倒计时，但你应该没有问题适应插件，因为它很简单。

于 2012-09-11T15:47:42.877 回答