jQuery学习笔记三（jQuery动画和位置尺寸的设置）

jQuery学习笔记三（jQuery动画和位置尺寸的设置）

1，jQuery的鼠标的移入移出事件

• mouseover()和mouseout()函数
  分别是移入移出，参数为一个匿名函数，在移入、移出的时候执行，并且子元素的移入移出事件会触发父元素的移入移出事件。
• mouseenter()和mouseleave()函数
  和mouseover()，mouseout()函数相似，但是子元素的移入移出事件不会触发父元素的移入移出事件，在实际操作中，推荐使用该方式。
• hover(function(){};function(){};)函数
  有两种参数接收方式，可以接收两个参数（匿名函数），分别监听移入事件，移出事件；也可以接收一个参数（匿名函数），既监听移入事件，又监听移出事件。

2，显示隐藏动画

• show()和hide()函数
  show()和hide()函数分别是显示，隐藏动画的函数，都可以设置时间和回调函数。
• toggle()函数
  toggle()函数是切换的意思，如果当前是显示状态，就切换到隐藏状态，如果当前是隐藏状态，就切换到显示状态。也可以设置时间和回调函数

3，展开收起动画

• slideDown()和slideUp()函数
  slideDown()和slideUp()函数分别是展开和收起动画的函数，用法和show(),hide()一致。
• slideToggle()函数
  slideToggle()函数是切换展开和收起状态的函数，用法同toggle()一致。

4，淡入淡出动画

• fadeIn()和fadeOut()函数
  fadeIn()和fadeOut()函数是淡入淡出动画的函数，用法同show(),hide()一致。
• fadeToggle()函数
  fadeToggle()函数是切换淡入淡出状态的函数，用法同toggle()一致。
• fadeTo()函数
  fadeTo()函数带有三个参数，第一个参数是变化的时间，第二个参数是执行后的透明度，第三个参数是回调函数。

  fadeTo(1000,0.5,function(){});
  

5，自定义动画

• animate()函数
  自定义修改宽高等属性，并定义时间和回调函数。接收四个参数，分别是
  1. 接受一个对象，并修改对象的属性。
  2. 设置动画的时间
  3. 设置动画的节奏，默认是swing
  4. 设置动画的回调函数。

  $(".one").animate({
  width:500
  },1000,swing,function(){alert("自定义动画执行完毕");});
  

6，jQuery动画中的注意事项

• stop()方法
  1. 停止当前动画，防止出现动画队列，建议在执行动画之前先调用stop()方法，然后再执行动画。
  2. stop可以接收两个参数：
     stop(“是否停止后续动画”,“是否完成当前动画”)
• delay()方法
  动画结束之后等多长时间再执行下一个动画，事件默认毫秒。

7，位置和尺寸设置

• wide(),height()
  wide(),height()设置或获取元素的宽高，不包含内边距，边框，外边距。
  还有几种类似的方法可以获取包含内边距、边框、外边距的宽高。

  $(".father").width();//绝对的宽高
  $(".father").width();
  

• offset()
  获取和设置元素距离窗口的偏移位
  返回一个对象，对象中包含top和left值，距离document。

  $(".son").offset().left;
  $(".son").offset({left:10})
  

• position()
• 返回一个对象，对象中包含top和left值，距离定位父级（offsetParent）。
  获取距离定位元素的偏移位,position不能进行设置，只能用于获取值。

  $("son").position().left;
  

• scrollTop()
  scrollTop()用来获取或设置滚动元素的偏移位。
  也可以这样说：被卷曲出去的宽高：展示的图像距离原图的left和top的距离
  可以获取也可以设置

  $(".scroll").scrollTop();
  $(".scroll").scrollTop(300);//这里只能是数字，不能是字符串
  $("body").scrollTop()+$("html").scrollTop();//获取网面的滚动偏移位。
  $("html,body").scrollTop(300);//设置网页滚动偏移位