当前位置：网站首页 > 技术文章 > 正文

jQuery 自定义动画——animate

zhezhongyun 2025-08-06 23:57 4 浏览

自定义动画

使用animate()方法

animate(params,[duration],[easing],[callback])

其中params为希望进行变换的CSS属性列表,以及希望变化到的最终值;

需要特别指出,params中的变量遵循camel(驼峰式)命名方式,例如：paddingLeft不能写成padding_left

params只能是CSS中用数值表示的属性,例如width、top、opacity等，像backgroundColor这样的属性不被animate()支持;

属性值必须加引号,例如：width: "90%",用逗号隔开

duration为持续的时间,三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fast: 快速的

easing为可选参数,通常供动画插件使用,用来控制变化工程的节奏,jQuery中只提供了linear和swing两个值

jQuery 代码:

点击按钮后div元素的几个不同属性一同变化

// 在一个动画中同时应用三种类型的效果

$("#go").click(function(){
    $("#block").animate({
        width:"90%",
        height:"100%",
        fontSize:"10em",
        borderWidth:"10px"
    }, 1000 );
});

HTML 代码:

<button id="go"> Run</button>
<div id="block">Hello!</div>

相对变化的自定义动画

在params的CSS属性列表中,jQuery还允许使用"+="或者"-="来表示相对变化(多次变化)

<html>
<head>
<title>animate()方法</title>
<style type="text/css">
<!--
body{
background:url(bg2.jpg);
}
div{
position:absolute; /* 绝对定位 */
left:90px; top:50px;
}
input{
border:1px solid #000033;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
    $("input:first").click(function(){
    $("#block").animate({
    left: "-=80px" //相对左移
    },300);
    });
    $("input:last").click(function(){
    $("#block").animate({
    left: "+=80px" //相对右移
    },300);
    });
});
</script>
</head>
<body>
<input type="button" value="<<左"> <input type="button" value="右>>">
<div id="block"><img src="05.jpg"></div>
</body>
</html>

让指定元素左右移动

jQuery 代码:

$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow"); //+50px只能移动一次
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow"); //-50px只能移动一次
});

HTML 代码:

<button id="left"><<</button> <button id="right">>></button>
<div class="block"></div>

另外在CSS属性列表params中,还可以将属性的最终值设置为"show"、"hide"、"toggle"

在600毫秒内切换段落的高度和透明度

jQuery 代码:

$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");

用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

jQuery 代码:

$("p").animate({
left: 50, opacity: 'show'
}, 500);

一个使用"easein"函数提供不同动画样式的例子。只有使用了插件来提供这个"easein"函数，这个参数才起作用。

jQuery 代码:

$("p").animate({
opacity: 'show'
}, "slow", "easein");

animate()方法还有另外一种形式

animate(params,options)

其中params与第一种形式完全相同,options为动画的可选参数列表,主要包括duration、easing、callback、queue等。

其中duration、easing、callback与第1种形式完全一样，queue为布尔值，表示当有多个animate()组成jQuery链时,当前

animate()与紧接着的下一个animate()是按顺序执行(true,默认值),还是同时触发(false);

动画效果的触发程序

jQuery代码:

$(function(){
    $("input:eq(0)").click(function(){
    //第一个animate与第二个animate同时执行，然后再执行第三个
    $("#block1").animate({width:"90%"},{queue:false,duration:1500})
    .animate({fontSize:"24px"},1000)
    .animate({borderRightWidth:"20px"},1000);
    });
    $("input:eq(1)").click(function(){
    //依次执行三个animate
    $("#block2").animate({width:"90%"},1500)
    .animate({fontSize:"24px"}, 1000)
    .animate({borderRightWidth:"20px"}, 1000);
    });
    $("input:eq(2)").click(function(){
    $("input:eq(0)").click(); //触发单击事件,等同于$("input:eq(0)").trigger("click");
    $("input:eq(1)").click(); //触发单击事件,等同于$("input:eq(1)").trigger("click");
    });
    $("input:eq(3)").click(function(){
    //恢复默认设置
    $("div").css({width:"", fontSize:"", borderWidth:""});
    });
});

HTML代码:

<input type="button" id="go1" value="Block1动画">
<input type="button" id="go2" value="Block2动画">
<input type="button" id="go3" value="同时动画">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

jQuery代码:

$("button").click(function(){
//$("li").animate(参与过渡的属性,时长,效果,回调函数);
$("li").delay(5000).animate({
"width": "500px"
});
})

HTML代码:

<button>延迟执行</button>
<ul>
<li>1111</li>
</ul>

实例: delay特效

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid orange;
position: relative;
}
li{
width: 50px;
height: 50px;
background-image: url("img/ym.jpg");
background-repeat: no-repeat;
display: none;
position: absolute;
}
</style>
</head>
<body>
<button>┏ (゜ω゜)=</button>
<ul>
</ul>
<script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var str = "";
for(var i=0;i<10;i++){
for(var j=0;j<10;j++){
str += "<li style='left: "+(j*50)+"px;top: "+(i*50)+"px;background-position: "+(j*-50)+"px "+(i*-50)+"px;'></li>";
}
}
$("ul").html(str);



$("button").click(function(){
//$("li").delay(Math.random()*1000).show()
$("li").each(function(){

$(this).delay(Math.random()*1000).fadeIn(100,"easeInOutBounce");
})

})
</script>
</body>
</html>

页面滚动到顶部的效果

$('html, body').animate({scrollTop:0}, 500); //页面滚动

实例: 返回顶部

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 5000px;
background-image: linear-gradient(red,blue,orange,green,pink,yellow);
}
a{
width: 50px;
height: 50px;
color: #000;
font-size: 14px;
text-align: center;
line-height: 25px;
border: 1px solid #000;
background-color: #fff;
text-decoration: none;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<a href="javascript:;">返回<br/>顶部</a>

<script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("a").click(function(){
//返回顶部特定写法
$("html,body").animate({
"scrollTop": 0
})
});
</script>
</body>
</html>

transition-delay 属性

上一篇：D3.js 4.0.0 发布，JavaScript 可视化库
下一篇：JDK高版本特性总结与ZGC实践

jQuery 自定义动画——animate

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?