Question

我在页面上放置此代码，放大，缩小然后恢复原始文本大小。

我想知道如何放慢速度和无休止地循环这个动画。

以下是javascript -

$(".text1 h1 span").animate({"zoom": "1.2", "-ms-zoom": "1.2", "top":"-5px"}, function(){
                $(".slide5 h1 span").animate({"zoom": "0.8", "-ms-zoom": "0.8", "top":"5px"}, function(){
                $(".slide5 h1 span").animate({"zoom": "1", "-ms-zoom": "1", "top":""});                                                                       
                });                                                           
    });

请帮忙。

Answer 1

您可以将duration属性添加到动画以减慢速度。递归调用动画以产生如下无限循环：

function loop(){
    $(".text1 h1 span").animate({"zoom": "1.2", "-ms-zoom": "1.2", "top":"-5px", duration: 1000}, function(){
        $(".slide5 h1 span").animate({"zoom": "0.8", "-ms-zoom": "0.8", "top":"5px", duration: 1000}, function(){
            $(".slide5 h1 span").animate({"zoom": "1", "-ms-zoom": "1", "top":"", duration: 1000}, loop);                                                                       
        });                                                           
    });                                                               
}
loop();

声明循环被声明并被调用两次，第一个是触发器，第二个是当缩放到1时动画的下一次迭代

Answer 2

function anim1() {
    $(".slide5 h1 span").animate({"zoom": "0.8", "-ms-zoom": "0.8", "top":"5px"}, 2000, anim2);
}
function anim2() {
    $(".slide5 h1 span").animate({"zoom": "1", "-ms-zoom": "1", "top":""}, 2000, anim1);
}

$(".text1 h1 span").animate({"zoom": "1.2", "-ms-zoom": "1.2", "top":"-5px"}, 1000, anim1);

数字（示例中为1000或2000）是动画需要多长时间 - 较大的数字会减慢它的速度

此代码将在一秒钟内执行第一部分，然后每隔4秒执行第二部分和第三部分

无限循环到JS驱动的文本缩放动画

2 个答案: