如何不断地每秒扩大和缩小字体大小？

我正在尝试动画一些文字。当页面加载时，我希望此文本扩展为大于默认字体大小，然后回退到其原始字体大小。我希望在一秒内发生这种情况，并不断做到这一点。如何不断地每秒扩大和缩小字体大小？

这是我迄今所尝试，但不起作用：

$(document).ready(function(){ 
    function expandName(){ 
     nameInter = setInterval(function(){ 
      $("#name p").stop().animate({fontSize: '30px'}); 


      $("#name p").stop().animate({fontSize: '22px'}); 
     }, 1000); 

    } 
    expandName(); 
});

的HTML：

<div id="name"><p>name</p></div>

和CSS：

#name p{ 
    font-size: 22px; 

}

所以我认为当网页已经加载时，它会扩展到30px，并且每秒缩回到22px，并不断重复此操作。为什么不这样做？

来源

2014-02-07 crm

尝试在这里使用callback：

$(document).ready(function(){ 
    function expandName(){ 
     nameInter = setInterval(function(){ 
      $("#name p").stop().animate({fontSize: '30px'}, function() { 
       $("#name p").stop().animate({fontSize: '22px'}); 
      }); 
     }, 1000); 

    } 
    expandName(); 
});

Fiddle Demo

来源

2014-02-07 13:41:56 Felix

最有可能是因为你火两个动画后海誓山盟的权利，第二立即停止第一。所以基本上第一个（扩展文本）有一个毫秒动画，在它已经停止之前。

试图调用一个函数，并扩大在该功能降低字体大小之间切换：

jQuery(document).ready(function($) { 
    var animateText = function() { 
     if($('p').hasClass('bigText')) 
      var toSize = '10px'; 
     else 
      var toSize = '30px'; 
     $('p').toggleClass('bigText'); 
     $('p').stop(true,true).animate({ 'font-size': toSize}); 
    }; 

    setInterval(animateText, 1000); 
});

编辑

我添加了一个纯CSS的解决方案。结果略有不同，但如果您使用css动画选项进行演奏，您可以获得与我相同的结果。看看小提琴！

基本的CSS：

p { animation: textSizeToggle 1s infinite alternate; font-size: 30px; } 

@keyframes textSizeToggle { 
    from { font-size: 30px; } 
    to { font-size: 10px; } 
}

Fiddle!

来源

2014-02-07 13:51:54 giorgio

如何不断地每秒扩大和缩小字体大小？

回答

相关问题