如何不斷地每秒擴大和縮小字體大小？

我正在嘗試動畫一些文字。當頁面加載時，我希望此文本擴展爲大於默認字體大小，然後回退到其原始字體大小。我希望在一秒內發生這種情況，並不斷做到這一點。如何不斷地每秒擴大和縮小字體大小？

這是我迄今所嘗試，但不起作用：

$(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

如何不斷地每秒擴大和縮小字體大小？

回答

相關問題