第三章 jQuery中的动画

一、jQuery样式相关方法

宽度 = width + 2padding + 2border + 2margin

   //获取视口区的宽高：
   1、$(window).height()
   2、$(window).width()

   //获取内容区的宽高：
      $('div').width(); 
      $('div').height();

   //获取内容+padding区的宽高：
   3、$('div').innerHeight()
   4、$('div').innerWidth()

   //获取内容+padding+border区的宽高：
   5、$('div').outerHeight()
   6、$('div').outerWidth()

   //获取内容+padding+border+margin区的宽高： 
    $('div').outerWidth(true); 
    $('div').outerHeight(true);

   //获取相对于文档的偏移
   7、.offset()

   //获取相对于定位父元素的偏移
   8、.position()

   //横向滚动条左侧的偏移
   9、.scrollLeft()

   //横向滚动条上侧的偏移
   10、.scrollTop()

   //获取离它最近的父定位元素  
   11、.offsetParent()

二、效果

    1.基本效果
      1）隐藏 hide()
      2）显示 show()
      3）隐藏与显示 toggle()

    2.淡入淡出效果
      1）淡入  fadeIn()
      2）淡出  fadeOut()
      3）淡入到 fadeTo()
      4）淡入与淡出 fadeToggle()

    3.滑动效果
      1）滑下 slideDown()
      2）滑上 slideUp()
      3）滑上与滑下 slideToggle()

    4.自定义效果
      animate()