jQuery动画效果怎么做
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('.tutu').animate({left:'250px',width:'100px',height:'100px',opacity:'0.5'});
});
$('#btn2').click(function(){
$('.tutu').animate({left:'-10px',width:'200px',height:'200px',opacity:'1'});
});
});
</script>
<style type="text/css">
.tutu{
width:300px;
height: 300px;
background-color: red;
position:relative;
/* margin: 0 auto;*/
}
</style>
</head>
<body>
<div class="tutu">
</div>
<input type="button" id="btn1" value="动画一">
<input type="button" id="btn2" value="动画二">
</body>
</html>如上代码，如果点击动画一按钮，div就会往右移动250px,并且大小会变成高100px，宽100px，透明度会变成0.5；如果点击动画二按钮，div就会往回移动10px，高度和宽度会变成200px，透明度会变成1;
下一篇： jQuery如何做到停止动画效果
上一篇：jquery渐变效果详解
评论