Question

我试图动画一些文字。当页面加载时，我希望此文本扩展为大于默认字体大小，然后缩回到其原始字体大小。我希望这能在一秒钟内发生并不断地做到这一点。

这是我到目前为止所尝试的，但不起作用：

$(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并不断重复。为什么不这样做？

Answer 1

尝试在此使用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

Answer 2

最有可能的原因是你在彼此之后立即发射两个动画，第二个立即停止第一个动画。所以基本上第一个（扩展文本）在它已经停止之前有一个毫秒到动画。

尝试调用一个函数，并在该函数中扩展和降低字体大小之间切换：

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!

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

2 个答案: