JQuery自定义动画——animate()学习

最新推荐文章于 2023-12-18 10:35:42 发布

grandir

最新推荐文章于 2023-12-18 10:35:42 发布

阅读量1.3k

点赞数 4

文章标签： Jquery自定义动画 animate()方法的使用

本文链接：https://blog.csdn.net/weixin_44738940/article/details/102676693

版权

JQuery自定义动画——animate()学习

可以使用animate 方法创建和实现自定义动画，animate() 方法通过执行 CSS 属性集的自定义动画，满足更多复杂多变的要求。
该方法通过CSS样式将元素从一个状态改变为另一个状态。即通过CSS属性值逐渐改变的，实现动画效果。

一.animate()方法的定义

语法： $(selector).animate(styles, [speed], [easing], [callback])
Styles:必选。规定产生动画效果的 CSS 样式和值。
Speed:可选。规定动画的速度。
Easing:可选。规定在不同的动画点中设置动画速度的 easing 函数: swing/ linear
Callback:可选。回调函数。

Styles参数写法：以键值对形式设置（可能会存在修改多个CSS样式)
如：改变一个div的高度，同时改变宽度透明度等。

$('#box').animate({
 height : '200px’,
 width : '300px',
 opacity : 0.5,
 fontSize : '50px’
        })

举例：
在这里插入图片描述
点击按钮‘执行动画’后

实现代码：

<!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" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
 #box {
 width:100px;
 margin:25px;
 background-color:  #6495ed;
 position:absolute;
 border:3px dashed blue;
}
</style>
</head>
<body>
 <input type="button" class="button" value="执行动画!" />
 <div id="box">RIA应用开发</div>
<script>
 $('.button').click(function () {
  $('#box').animate({
   width : '300px',
   height : '200px',
   opacity : 0.5,
   fontSize : '50px'
  }, 2000, function () {
   alert('动画执行完毕！');
  });
 }); 
</script>
</body>
</html>

二.animate()方法实现绝对位移动画

在这里插入图片描述
实现代码：

<!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" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
 #box {
 width:100px;
 margin:25px;
 background-color:  #6495ed;
 position:absolute;
 border:3px dashed blue;
}
</style>
</head>
<body>
  <input type="button" class="button" value="执行动画!" />
<div id="box">RIA应用开发</div>
<script>
 // 位移
 $('.button').click(function () {
  $('#box').animate({
   left : '300px',
   top : '200px'
  }, 10000);
 });
</script>
</body>
</html>

三.animate()方法实现相对位移动画

使用 “+=” 或 “-=” 来创建相对动画。
举例：每点击按钮，图片就会相对自己当前的位置右移200px。
在这里插入图片描述
实现代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
 #box {
 width:100px;
 margin:25px;
 background-color:  #6495ed;
 position:relative;
 border:3px dashed blue;
}
</style>
</head>
<body>
  <input type="button" class="button" value="执行动画!" />
 <div id="box">RIA应用开发</div>
<script>
$(function () {
 $('.button').click(function(){
  $('#box').animate({
       left : '+=100px'
     }, 'slow');
  }); 
});
</script>
</body>
</html>

四.animate() 方法回调函数实现列队动画

<!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" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
 #box {
 width:100px;
 margin:25px;
 background-color:  #6495ed;
 position:relative;
 border:3px dashed blue;
}
</style>
</head>
<body>
<div id="box">RIA应用开发</div>
<script>
$(function () {
 $('#box').animate({left :  '+=200px'}, function (){
               $('#box').animate({left :  '+=200px'}, function (){
                            $('#box').animate({left :  '+=200px'
                                                        });
                                            });
                                   });;
});
</script>
</body>
</html>

五.animate() 方法连缀实现列队动画

<!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" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
 #box {
 width:100px;
 margin:25px;
 background-color:  #6495ed;
 position:relative;
 border:3px dashed blue;
}
</style>
</head>
<body>
<div id="box">RIA应用开发</div>
<script>
$(function () {
 $('#box').animate({width : '300px'})
   .animate({height : '200px'})
   .animate({opacity : 0.5})
   .animate({fontSize : '50px'})
});
</script>
</body>
</html>

六. stop() 方法停止当前正在运行的动画

语法：$(selector).stop([stopAll], [goToEnd])
参数 stopAll 规定是否停止被选元素的所有加入队列的动画，默认为 false，如果参数为true，当有列队动画的时候，会取消后面的列队动画。
参数 goToEnd 规定是否允许完成当前的动画，默认为 false，如果参数为 true，则停止后立即到达末尾处。(该参数只能在设置了 stopAll参数时使用。)
举例：

<!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" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
 #box {
 width:100px;
 margin:25px;
 background-color:  #6495ed;
 position:relative;
 border:3px dashed blue;
}
</style>
</head>
<body>
  <input type="button" class="button" value="执行动画!" />
  <input type="button" id="stop" value="停!"/>
<div id="box">RIA应用开发</div>
<script>
$(function () {
 // 位移
 $('.button').click(function () {
  $('#box').animate({
   left : '300px',
   top : '200px'
  }, 10000);
 });
 // 停止方法
 $("#stop").click(function(){
            $("#box").stop(true,true);//直接跳到最后位置
   //$("#box").stop(true,false);//停在当前位置
   //$("#box").stop(); 
    });   
});
</script>
</body>
</html>

grandir

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JQuery自定义动画——animate()学习

JQuery自定义动画——animate()学习一个从基础学习JQuery的前端菜鸟，之后会持续更新，欢迎大家关注。可以使 animate 方法创建和实现自定义动画，animate() 方法通过执行 CSS 属性集的自定义动画，满足更多复杂多变的要求。该方法通过CSS样式将元素从一个状态改变为另一个状态。即通过CSS属性值逐渐改变的，实现动画效果。语法： $(selector).anima...
复制链接

扫一扫