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

Infinite Loop to JS driven text zoom animation

本文关键字：文本 缩放 动画 JS 无限循环      更新时间：2023-09-26

我在一个页面上有这段代码，它可以放大、缩小，然后恢复原始文本大小。

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

下面是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":""});                                                                       
                });                                                           
    });

请帮助。

你可以添加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();

注意循环被声明和调用两次，第一次是触发器，第二次是在zoom to 1完成时动画的下一次迭代

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秒连续执行第二和第三部分

相关文章：