【自学笔记】js JavaScript callback()执行线性动画

最新推荐文章于 2024-10-22 12:20:41 发布

indigo_

最新推荐文章于 2024-10-22 12:20:41 发布

阅读量675

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： callback 动画 javascript

本文链接：https://blog.youkuaiyun.com/indigo_/article/details/51690607

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现动画的连续播放效果，并通过回调函数确保动画按序进行。对比了jQuery与原生JS实现动画回调的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

才入门不久，要写动画的连贯发生，在jQuery中实现很简单，直接回调函数即可。

    // 回调处理
    $('button:first').click(function() {
        $("#block1").animate({
            width: "50%"
        }, 2000, function() {  // 嵌套回调
            $("#block2").animate({
                width: "50%"
            }, 2000);
        });
    });

结果为第一个块缩减到50% 后，第二个才开始缩减；
这里写图片描述
但是用原生js来写，则要用到callback；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#div1{
    position:absolute;
    width:50px;
    height:50px;
    left:10%;
    background-color:#FF0;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
function a(callback,time) // 第一个参数为回调的函数，第二个则为过滤动画执行时间
{    
div1.style.left = 40 + '%';
div1.style.transitionProperty = 'all';
div1.style.transitionDuration = time + 'ms';
div1.style.transitionTimingFunction = 'linear';
setTimeout(callback,time);
} 
function b(){ 
 div1.style.width = 200 + 'px';
}  
} 
 window.onload = function () 
{ 
a(b,3000);
} 
</script>
</body>
</html>