元素的尺寸 与 动画效果

元素的尺寸m

        var $div = $('div')
        //内容尺寸
        console.log($div.width(),$div.height())//100.150
        //内部尺寸
        console.log($div.innerWidth(),$div.innerHeight())//120 170
        //外部尺寸
        //height+padding +border
        console.log($div.outerWidth(),$div.outerHeight())
        console.log($div.outerWidth(true),$div.outerHeight(true))
        //如果是true再加上margin

淡入淡出: 不断改变元素的透明度来实现的 opacity

1. fadeIn(): 带动画的显示

2. fadeOut(): 带动画隐藏

3. fadeToggle(): 带动画切换显示/隐藏

滑动动画 不断改变元素的高度实现

1. slideDown(): 带动画的展开   //变化当前元素的高度

2. slideUp(): 带动画的收缩

3. slideToggle(): 带动画的切换展开/收缩

jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的

1. animate(): 自定义动画效果的动画

2. stop(): 停止动画

var $div1 = $('.div1')
   $('#btn1').click(function(){
      // $div1.animate({
      //   width:'200px' ,//可以自己加单位
      //   height:200
      // },1000)
      $div1
      .animate({
        width:200
      },1000)
      .animate({
        height:200
      },2000)
   })
   $('#btn2').click(function(){
    $div1.animate({//右下移动  左上移动把值改为比原来的值小的值  
      left:500,
      top:100
    },1000)
    })
    $('#btn3').click(function(){//指定移动的距离 += -=
     $div1.animate({
       left:'+=100',
       top:'-=100'
     })
    })
    $('#btn4').click(function(){
      $div1.stop()
    })