jQuery——动画与三大家族操作(尺寸操作)

jQuery动画

名称	用法	描述
show()	$(‘div’).show(动画时间，动画完成回调)	展示动画，主要修改元素 宽高 + display为block
hide()	$(‘div’).hide(动画时间，动画完成回调)	隐藏动画，主要修改元素 宽高 + display为none
slideDown()	$(‘div’).slideDown(动画时间，动画完成回调)	滑入动画（卷帘门效果），主要修改元素 高度+ display为block
slideUp()	$(‘div’).slideUp(动画时间，动画完成回调)	滑出动画（卷帘门效果），主要修改元素 高度+ display为none
fadeIn()	$(‘div’).fadeIn(动画时间，,动画完成回调)	淡入动画(渐变效果)，主要修改元素 透明度1+ display为block
fadeOut()	$(‘div’).fadeOut(动画时间，,动画完成回调)	淡出动画(渐变效果)，主要修改元素 透明度0+ display为block
fadeTo()	$(‘div’).fadeTo(动画时间，目标透明度,动画完成回调)	淡入动画(渐变效果)，主要修改元素 透明度+ display为block
animate()	$(‘div’).animate(属性对象,动画时间,动画速度,回调函数)	相当于webApi中封装的缓动动画animationSlow()，只是参数不同而已

显示（show）与隐藏(hide)

• 1.显示： $().show();

  • 第一个参数动画时间:单位ms
    • 动画时间可传三个字符串 fast:200 normal:400 slow:600
      $(’#div’).show(’’); //字符串代表normal
  • 缓动(swing)(默认),匀速：linear,完成回调
  • 动画也支持隐式迭代：选中多个元素会同时执行动画

• 2.隐藏：$().hide();

  • 特点与show()完全一致
  • 动画效果与show()相反

• 3.切换：$().toggle();

  • 如果元素当前display为none隐藏，则执行show()动画
  • 如果元素当前display为block显示，则执行hide()动画

滑入（slideDown）与滑出（slideUp）

• 1.滑入：$().slideDown();
• 2.滑出：$().slideUp();
• 3.切换：$().slideToggle();
  滑入/滑出 切换
  如果高度为0 ： 则滑入
  如果高度不为0 ： 则滑出*
• 滑入滑出动画 所有的特点 与显示隐藏一致
  唯一区别： 滑入滑出，不传参数默认时间是noraml:400ms

淡入（fadeIn）与淡出（fadeOut）

jq淡入淡出动画 （修改透明度opacity : 0-1切换）

• 1.淡入：$().fadeIn();
• 2.淡出：$().fadeOut();
• 3.淡入/出切换：$().fadeToggle();
  • 淡入/淡出切换
    如果透明度为0 ： 则淡入 fadeIn()
    如果透明度不为0 ： 则淡出 fadeOut()
• 4.淡入到指定透明度：$().fadeTo();

自定义动画

 /**
            * @description:自定义动画
            * @param {object} properties : 要移动的属性
            * @param {number} duration : 动画时间
            * @param {string} speed : 默认swing缓动，  匀速：linear
            * @param {function} 完成回调函数
            * @return: 
            */
            $('#div1').animate({
                left:300,
                top:200,
                width:400,
                height:400,
                opacity:0.6
            },2000,'swing',function(){
                alert('666');
            });

/* 常见用法： 一般传第一个参数 和 第四个参数 */

动画队列

• 清除队列： 相当于以前学习的，每一次新的动画之前应该先清除以前的定时器
  $().stop(布尔,布尔)
  • 第一个参数：是否清除队列 true:清除（后面动画不执行）
  • 第二个参数：是否跳转本次动画结果 true:跳转（瞬间跳转到本次动画结果）

//点击开始按钮，模拟动画队列
$('#start').click(function(){
            $('div').slideDown(2000).slideUp(2000);
        });

jQuery三大家族操作(尺寸操作)

名称	用法	描述
outerWidth() / outerHieght()	$(‘div’).outerWidth()	获取 width + padding·+ border(相当于原生的offsetWidth/Height)
width() / height()	$(‘div’).width()	获取 width
innerWidth()/innerHeight()	$(‘div’).innerWidth()	获取 wdith + padding
outerWidth(true)/outerHeight(true)	$(‘div’).outerWidth(true)	获取 width + padding·+ border + margin
position()	$(‘div’).position()	对象类型，自身左外边框 到 定位父级 左内边框距离（相当于原生的offsetLeft/Top）
offset()	$(‘div’).offset()	对象类型, 自身左外边框 距离 页面 左内边框距离
scrollLeft() / scrollTop()	$(‘div’).scrollLeft()	与原生的scrollLeft/Top作用一样.支持修改

宽高尺寸

• 1.原生DOM三大家族： offset家族、scroll家族、client家族

  • 1.1 offset家族： 获取元素 自身的 真实宽高与位置
    元素.offsetWidth/Height : content + padding + border
元素.offsetLeft/Top : 元素左/上 外边框 到定位父级 左/上 内边框距离
元素.offsetParent : 元素的最近的定位父元素
  • 1.2 scroll家族： 获取元素 内容的 真实宽高与位置
    元素.scrollWidth/Height : 获取内容的真实高度
    元素.scrollLeft/Top : 获取内容的真实位置（滚动条滚动的距离）
    应用场景： 固定导航
  • 1.3 client家族：获取内容 可视区域的宽高与位置
    元素.clientWidth/Height :获取可视区域宽高（视口）
    元素.clientLeft/Top :获取可视区域位置（左边框和上边框宽度）
    应用场景： 响应式布局

• 原生三大家族有3个特点
  a. 可以获取行内 + 行外
  b. 获取的类型是number类型
  c. 只能获取，不能修改

• jq操作尺寸
  1 $().outerWidth() : 获取content + padding + border
  2 $().width() : 获取content
  3 $().innerWidth() : 获取content + padding
  4 $().outerWidth(true) : 获取content + padding + border + margin

  jq的尺寸是可以修改的,底层原理都是修改 width/height

position与offset

• 1 $().position() : 相当于原生的offsetLeft/Top

  • 获取的是自己的 左/上 外边框 到 定位父级 左/上 内边框距离
  • jq也是无法修改的

• 2 $().offset() : 获取的是元素左/上外边框 到 页面 的距离

• tips:如果元素没有定位。为了保证left和top也可以生效
  jq会自动设置元素的定位为相对定位

• 两者获取到的都是对象

获取页面可视区域宽高

1. 获取页面可视区域宽高 : $(window).width()

2. 页面可视区域宽高（视口）应用场景 ： 响应式布局
   (1)给页面注册onresize事件 ： 监听视口变化
   (2)获取页面视口宽高

//1.给页面注册onresize事件 ： 监听视口变化
        $(window).resize(function () {
            // console.log('页面视口变化');
            //2.获取页面视口宽高
            console.log( $(window).width(), $(window).height() );

            /* 响应式布局 */
            if( $(window).width() >= 1200 ){
                $('body').css('backgroundColor','red');
            }else if( $(window).width() >= 992 ){
                $('body').css('backgroundColor','orange');
            }else if( $(window).width() >= 768 ){
                $('body').css('backgroundColor','yellow');
            }else{
                $('body').css('backgroundColor','green');
            };

            /* 监听横竖屏变化 */
            if( $(window).width() > $(window).height() ){
                alert('横屏');
            }else{
                alert('竖屏');
            }
            
        });

scrollLeft与scrollTop

• 1.$().scrollLeft() / $().scrollTop() : 作用与原生一致
  滚动条 左/上 滚动的距离
• 2.获取页面滚动的距离
  (1)给页面注册滚动条事件 onscroll
  (2)获取页面滚动的距离

 //(1)给页面注册滚动条事件 onscroll
        $(window).scroll(function(){
            //(2)获取页面滚动的距离
        console.log( $(window).scrollLeft() , $(window).scrollTop() );
            
        });