动画效果

改变元素的显示和隐藏

DOM : 运动插件的封装
move(‘width’,’500’,1000) 动画效果

  • show() 显示 通过设置display属性改变
  • hide() 隐藏 通过设置display属性改变
  • toggle() 切换

同时改变元素的宽高和透明度来隐藏和显示元素

  1. 参数1：时间
  2. 参数2 ：函数
  3. 参数3： 运动速度
  • fadeIn() 淡入 让元素显示
  • fadeOut() 淡出 让元素隐藏

通过元素的透明度让元素显示和隐藏,同时也会设置元素的display属性

  • fadeTo(3000,0.5,fn) 设置元素变化透明度的目标值 0-1
  • fadeToggle() 切换 将元素的透明度从0切换到1 / 从1-0
  • slideDown() 卷入
  • slideUp() 卷出
  • slideToggle() 切换 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="./jquery-1.12.4.js"></script>
  10.     <style>
  11.         * {
  12.             margin: 0px;
  13.             padding: 0px;
  14.         }
  16.         div {
  17.             width: 200px;
  18.             height: 150px;
  19.             overflow: hidden;
  20.         }
  22.         img {
  23.             width: 200px;
  24.             height: 150px;
  25.             display: block;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31.     <div>
  32.         <!-- <img src="./IMG_20210819_182021.jpg" alt=""> -->
  33.         <img src="./IMG_20210802_192614.jpg" alt="">
  34.         <img src="./IMG_20210804_191912_1.jpg" alt="">
  35.         <img src="./IMG_20210804_191919.jpg" alt="">
  36.         <img src="./IMG_20210819_182021.jpg" alt="">
  39.     </div>
  41.     <button>点我开始滑动</button>
  44.     <script>
  45.         // 定位：top  
  47.         // slideUp down  改变img的位置
  49.         $('button').click(function() {
  50.             setInterval(function() {
  52.                 $('div img:first').slideUp(function() {
  53.                     $('div img:last').after($(this));
  54.                     $('div img:last').css("display", "block")
  55.                 })
  56.             }, 2000)
  57.         })
  59.         // $('button').click(function() {
  60.         //     $('div').s();
  61.         //     console.log($('div'));
  62.         // })
  63.     </script>
  65. </body>
  67. </html>

通过改变元素高度来让元素显示和隐藏的

animate()

集合了以上的所有效果

通过改变元素的属性来达到动画效果

参数1: 属性对象
参数2：时间
参数3: 速度
参数4：回调函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="js/jquery.js"></script>
  9.     <style>
  10.         div{
  11.             width: 100px;
  12.             height: 100px;
  13.             background: hotpink;
  14.             position: absolute;
  15.             top: 0;
  16.             left: 0;
  17.         }
  18.         button{
  19.             position: absolute;
  20.             top:100px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div></div>
  26.     <button>点我</button>
  28.     <script>
  29.         // animate()
  31.         // div 宽度  定位：0 0  -》 100 100
  32.         // $('button').click(function(){
  33.         //     $('div').animate({
  34.         //         'width':500,
  35.         //         'top':100,
  36.         //         'left':100
  37.         //     },1000,'linear',function(){
  38.         //         console.log('over');
  39.         //     })
  40.         // })
  43.         // 在当前属性的值上 添加100px  直接在属性值上去进行运算 += 100
  45.         // $('button').click(function(){
  46.         //     $('div').animate({
  47.         //         'width':'+=100',
  48.         //         'top':'+=100',
  49.         //         'left':'+=100'
  50.         //     },1000,'linear',function(){
  51.         //         console.log('over');
  52.         //     })
  53.         // })
  56.         // 回调函数：函数中，当函数的功能执行完成后，然后执行传递的参数（函数）
  58.         // 递归： 在函数内容 只有执行完函数中的代码 才能结束函数
  60.         // 事情1 干完 -》 执行事件2 -》 处理事件3
  63.         // 处理事件1中 得到的结果是错误的   promise  回调地狱
  64.         $('button').click(function(){
  65.             $('div').animate({
  66.                 'width':500,
  67.                 'top':100,
  68.                 'left':100
  69.             },1000,'linear',function(){
  70.                 $('button').animate({
  71.                     'width':100,
  72.                     'height':100,
  73.                 },2000,'swing',function(){
  75.                 })
  76.             })
  77.         })
  79.         // var one = new Promise();
  81.         // one.then(function(){
  82.         //     // 成功后的要执行的事件
  83.         // },function(){
  84.         //     // 
  85.         // })
  87.         // 面试重点 ： promise
  89.     </script>
  90. </body>
  91. </html>
  • stop() 停止动画
  • finish() 完成动画
  • delay() 延迟动画 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="js/jquery.js"></script>
  9.     <style>
  10.         div{
  11.             width: 100px;
  12.             height: 100px;
  13.             background: hotpink;
  14.             position: absolute;
  15.             top: 50px;
  16.             left: 0;
  17.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div></div>
  23.     <button>stop</button>
  24.     <button>finish</button>
  25.     <button>delay</button>
  27.     <script>
  28.         $('div').click(function(){
  29.             $(this).animate({
  30.                 'opacity':0.2,
  31.                 // 'background':'red',
  32.                 'top':200,
  33.             },2000).delay(2000).animate({
  34.                 'width':500,
  35.                 'height':500
  36.             })
  37.         })
  39.         $('button:eq(0)').click(function(){
  40.             // stop  停止当前正在进行的动画 直接完成最后一个动画
  41.             // 传参true  停止当前所有的动画
  42.             // true true 直接完成当前动画 然后停止后面所有的动画
  43.             $('div').stop(true,true);
  44.         })
  45.         $('button:eq(1)').click(function(){
  46.             // 直接到达所有动画的目标 但是没有执行的过程
  47.             $('div').finish();
  48.         })
  50.         // 将需要延迟的动画前调用delay
  51.         $('button:eq(2)').click(function(){
  52.             // $('div').;
  53.         })
  55.     </script>
  56. </body>
  57. </html>

工具类

静态方法

  • $.each(data,function(){}) 遍历方法 forEach()
    $(data).each(function(){})
  • index() 获取元素在这一类元素中的下标
  • type() 类似 typeof
    typeof 数据是什么类型的 array date regExp -》 Object
    type 是什么数据
  • $.isArray()
  • $.isFunction()
  • $.isWindow()
    jquery插件内置的内部使用的方法
  • trim() 消除空格
  • proxy() 改变this的指向 类似bind 
  1. function show(){}
  3. var newShow = show.bind(obj,1,2);
  6. var newShow = $.proxy(show,obj);
  9. // 单例模式：实现功能 this的执行可能发生改变
  • $.noconflict() 防止冲突 变量冲突 $
  1. 引入jq   $
  3. 引入wq   $
  5. 引入sq    $
  7. $
  10. var $c = $.noconflict();
  12. $c('div)
  • $.parseJson() 将字符串转换为对象
    json数据 字符串 -》 对象
    JSON.parse(str) 原生
    json.stringify() 对象转换成json格式的字符串
  1. "{"name":123}"  从前端将json数据传递到后端
  • makeArray() 制作数组
  1. form()
  • $.extend()
  • jq.extend()