循环一个 jQuery 字体大小的动画答案

【问题标题】：Looping a jQuery font-size animation循环一个 jQuery 字体大小的动画
【发布时间】：2012-05-20 11:52:47
【问题描述】：

我目前有一行文本，其默认字体大小为 24。我将其设置为动画以将其大小调整回 22：

$(document).ready(function animateHeader() {
$('#random_header').animate({fontSize : "22px"}, 500);
});

我想在 24 到 22 和 22 到 24 之间连续循环播放这个动画。我该怎么做？

【问题讨论】：

我认为真正的问题是为什么？...
你可以把这个动画放在一个单独的函数中，在你最后一个animate你从起点再次调用这个函数。但这很恶心，还有其他方法可以做到这一点。

标签： jquery css animation loops font-size

【解决方案1】：

jsBin demo

$(document).ready(function(){
  
  function animateHeader(){
    $('#random_header').animate({fontSize : 22}, 500,function(){
      $(this).animate({fontSize : 24}, 500, animateHeader);
    });
  }
  animateHeader();
  

});

【讨论】：

【解决方案2】：

$(document).ready(function animateHeader() {
    $('#random_header').animate({
        fontSize: $('#random_header').css('fontSize') == '24px' ? '22px' : '24px'
    }, 500, animateHeader);
});

http://jsfiddle.net/thirtydot/aDZLy/

【讨论】：

用了上面那个，不过这个确实紧凑很多:)

【解决方案3】：

试试

function ani(size){
 $('#random_header').animate({fontSize : size+"px"}, 500, function(){ ani((size==22) ? 24 : 22 ); } );
}

ani(24);

【讨论】：

@Sagivo 请使用 Always™ === 进行比较。
@RokoC.Buljan 我不同意。在这种情况下， === 没有意义，因为我们不在乎这是字符串还是 int。总是使用 === 是错误的说法。
不要将您的 cmets 基于生成的调试器脚本。您应该知道 === 和 == 在类型检查中有所不同。在这种情况下，类型检查没有用处。 jsfiddle.net/DAzLS
我只是不喜欢挠头，因为我在 2000 多行的某处使用了 == 而不是 ===，而且我希望看到我的代码“有效”调试。而且我不希望我的代码在定义之前通过不必要的转换。
抱歉，我刚加入 Stackoverflow，只获得了 8 个代表 ;-(