jQuery：动画 & 节点

定位

获取位置

jquery提供了两个方法，来获取元素所处的位置：

// 取值
jQuery对象.offset()
// 取值
jQuery对象.position()

其提供了两种方法来获取元素的位置，这两种方法的行为略有不同：

参照物：
- offset：以<html>标签为参照物
- position：以最近一级的带有定位的祖先元素为参照物
外边距：
- offset：计算外边距
- position：不计算外边距

示例：

<div class="outer">
  <div class="box"></div>
</div>
<script>
  console.log('offset:', $('.box').offset())
  console.log('position:', $('.box').position())

  $('.outer').css('position', 'relative') // 添加定位
  console.log('offset:', $('.box').offset())
  console.log('position:', $('.box').position())

  $('.box').css('margin-left', '50px')
  console.log('offset:', $('.box').offset())
  console.log('position:', $('.box').position())

</script>

输出结果：

offset: {
    
    top: 15, left: 28}
position: {
    
    top: 15, left: 28}

offset: {
    
    top: 15, left: 28}
position: {
    
    top: 0, left: 0}

offset: {
    
    top: 15, left: 78}
position: {
    
    top: 0, left: 0}

在outer盒子内部，嵌套了一个box盒子。第一次输出box的位置，top: 15, left: 28是outer外层盒子到<html>，这些在CSS修饰中，没有展示。

随后给outer添加了一个定位，再次输出，offset不变依然以<html>为参照物。而posotion的值改变了，因为此时outer带有定位属性，于是box的position改变参照物为outer。

最后给box添加了一个左边距，offset的left增加了，而position没有。因为position不计算外边距，而offset计算外边距。

滚动距离

对于页面的滚动距离，jQuery也提供了两种方法：

// 取值
jQuery对象.scrollLeft()
jQuery对象.scrollTop()

// 赋值
jQuery对象.scrollLeft('值')
jQuery对象.scrollTop('值')

如果不传参，方法就返回当前的值，如果传参，则设置指定值。

一般来说，常用$(windows).scroll()注册浏览器的滚动事件，而$('html').scrollTop()来控制页面的滚动距离。

动画

显示隐藏

// 显示
jQuery对象.show()
jQuery对象.show(持续时间)
// 隐藏
jQuery对象.hide()
jQuery对象.show(持续时间)
// 切换
jQuery对象.toggle()
jQuery对象.toggle(持续时间)

对于显示和隐藏，如果不传入参数，那么就是直接切换状态。如果传入一个数值，此时就会变成一个动画，逐渐出现或消失，持续时间以毫秒为单位。

示例：

<button class="show">show</button>
<button class="hide">hide</button>
<button class="toggle">toggle</button>
<div class="box"></div>
<script>
  $('.show').click(function () {
    
    
    $('.box').show(1000)
  })
  $('.hide').click(function () {
    
    
    $('.box').hide(1000)
  })
  $('.toggle').click(function () {
    
    
    $('.box').toggle(1000)
  })
</script>

以上代码，创建了三个按钮和一个盒子，给按钮绑定事件，修改盒子的显示状态。

输出结果：

请添加图片描述

淡入淡出

jQuery不只有简单的出现与消失来控制显示状态，还有一些其它的方法提供更加多样的效果。

// 淡入
jQuery对象.fadeIn()
jQuery对象.fadeIn(持续时间)
// 淡出
jQuery对象.fadeIn()
jQuery对象.fadeIn(持续时间)
// 切换
jQuery对象.fadeToggle()
jQuery对象.fadeToggle(持续时间)

接口用法与之前一致。

示例：

<button class="show">fadeIn</button>
<button class="hide">fadeOut</button>
<button class="toggle">fadeToggle</button>
<div class="box"></div>
<script>
  $('.show').click(function () {
    
    
    $('.box').fadeIn(1000)
  })
  $('.hide').click(function () {
    
    
    $('.box').fadeOut(1000)
  })
  $('.toggle').click(function () {
    
    
    $('.box').fadeToggle(1000)
  })
</script>

这和之前是相似的代码，只是改变了三个方法。

输出结果：

请添加图片描述

展开收起

jQuery的最后一个基本动画就是展开与收起。

// 展开
jQuery对象.slideDown()
jQuery对象.slideDown(持续时间)
// 收起
jQuery对象.slideUp()
jQuery对象.slideUp(持续时间)
// 切换
jQuery对象.slideToggle()
jQuery对象.slideToggle(持续时间)

使用方法和前两者一样。

示例：

<button class="show">slideDown</button>
<button class="hide">slideUp</button>
<button class="toggle">slideToggle</button>
<div class="box"></div>
<script>
  $('.show').click(function () {
    
    
    $('.box').slideDown(1000)
  })
  $('.hide').click(function () {
    
    
    $('.box').slideUp(1000)
  })
  $('.toggle').click(function () {
    
    
    $('.box').slideToggle(1000)
  })
</script>

输出结果：

请添加图片描述

动画队列

如果频繁地触发动画效果，就会触发一个延迟效果：

请添加图片描述

此处频繁点击了按钮触发动画，当点击结束后很长一段时间，动画依然在持续，这是因为动画队列的存在。

每当触发一个动画，这个动画就会进入动画队列，浏览器依次执行队列中的动画。当多次点击按钮，其实就是加入了很多个动画到队列内部，此时当鼠标不再点击，队列内部还有动画，所以它还会执行。

这种动画队列，会显得浏览器响应有延迟性，所以实际上常常需要在执行动画前，把动画队列清空，让用户的点击触发的动画，可以立马执行。

语法：

// 停止动画
jQuery对象.stop()
jQuery对象.stop(true)
jQuery对象.stop(true, true)

这个stop方法有三种传参形式，分别传入0 1 2个true：

无参：立刻终止当前动画，进入下一个动画
true：立刻终止当前动画，清空队列，并定格在当前状态
true true：立刻终止当前动画，清空队列，并且跳转到当前动画结束的状态

想要处理反应不灵敏的问题，只需要每次执行动画前，stop终止之前的动画：

<button class="show">slideDown</button>
<button class="hide">slideUp</button>
<button class="toggle">slideToggle</button>
<div class="box"></div>
<script>
  $('.show').click(function () {
    
    
    $('.box').stop().slideDown(1000)
  })
  $('.hide').click(function () {
    
    
    $('.box').stop().slideUp(1000)
  })
  $('.toggle').click(function () {
    
    
    $('.box').stop().slideToggle(1000)
  })
</script>

此处的stop是无参数的，因为确保每次新的动画产生，都会立刻终止前一个动画，所以可以确保动画队列从始至终只有一个动画。

输出结果：

请添加图片描述

这一次，点击按钮后反应就非常的迅速，因为会立刻终止上一次的动画，保证这次的动画立刻执行。

自定义动画

为了支持更加复杂的动画效果，jQuery提供了animate方法：

jQuery对象.animate({
    
    属性}, 时间)

其第一个参数为一个对象，对象内部是要变化的属性值，以键值对的形式。第二个参数是时间，即整个动画持续的时间，以毫秒为单位。

在第一个参数内部，只有支持数值类的属性，比如%、px或者纯数字。如果说color这样的属性，就不能通过动画改变。

示例：

<button class="animate">animate</button>
<div class="box"></div>
<script>
  $('.animate').click(function () {
    
    
    $('.box').animate({
    
    
      height: 50,
      width: 150,
      marginLeft: 100,
      marginTop: 150
    }, 1000)
  })
</script>

以上案例中，给box创建了一个动画，该动画会改变box的宽高，以及左边距和上边距，共持续一秒。

输出结果：

请添加图片描述

这样就完成了一个多个属性都在改变的复杂动画。

动画回调函数

在动画结束后，jQuery允许立刻执行一个回调函数，来处理一些动画的后续动作。

语法：

jQuery对象.基础动画方法(回调函数)
jQuery对象.基础动画方法(时间, 回调函数)
jQuery对象.animate({
    
    属性}, 回调函数)
jQuery对象.animate({
    
    属性}, 时间 , 回调函数)

动画分为三种基础动画和animate实现的复杂动画，想要执行回调函数，在原先的传参情况下，最后一个参数额外填入一个回调函数即可。

在回调函数内部，this是触发动画的DOM元素，这可以很方便的进行一些收尾的样式调整。

示例：

<button class="animate">animate</button>
<div class="box"></div>
<script>
  $('.animate').click(function () {
    
    
    $('.box').animate(
      {
    
     width: 400 },
      2000,
      function () {
    
    
        $(this).css('backgroundColor', 'pink')
      })
  })
</script>

之前提到过，animate只能处理数值类的属性，背景色backgroundcolor就不允许在动画中调整。此时就可以在动画结束时，通过回调函数内的$(this)修改背景色。

输出结果：

请添加图片描述

动画延迟

如果希望在用户操作后，延迟一段时间再播放动画，此时可以时使用延迟方法。

语法：

jQuery对象.delay(延迟时间).动画方法()

此处的delay就用于延迟，延迟后返回的还是原先的对象，可以继续执行动画方法，比如animate，延迟时间以毫秒为单位。

这个延迟可以穿插在多个动画中：

$('.test')
	.delay(1000).animate({
    
    ...})
	.delay(1000).animate({
    
    ...})
	.delay(1000).animate({
    
    ...})

以上代码就是三个动画连续播放的样例，在每两个动画方法之间，插入一个delay，也就是一个动画结束后一秒播放另一个动画。

节点

插入节点

jQuery封装了在指定位置动态插入元素节点的方法，可以灵活的增加节点以及改变节点的位置。

语法：

父节点.append(参数)    // 插入到父节点的尾部
父节点.prepend(参数)   // 插入到父节点开头
兄弟节点.before(参数)  // 插入到兄弟节点前面
兄弟节点.after(参数)   // 插入到兄弟节点后面

在参数中填入要插入的元素，这个参数可以是文本形式的HTML标签，也可以是通过原生DOM创建的对象。

示例：

<button class="append">append</button>
<button class="before">before</button>
<div class="container">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
</div>
<script>
  $('.append').click(function(){
    
    
    $('.container').append('<div class="child new">D</div>')
  })

  $('.before').click(function(){
    
    
    $('.new').before('<div class="child">E</div>')
  })
</script>

以上代码，测试append和cefore方法。首先在父亲容器container的末尾，插入一个子元素D，随后在D的前面又插入一个兄弟节点E。

输出结果：

请添加图片描述

这四个方法不仅可以插入新元素，也可以移动现有元素的位置：

<button class="append">append</button>
<div class="container">
  <div class="child A">A</div>
  <div class="child B">B</div>
  <div class="child C">C</div>
</div>
<script>
  $('.append').click(function(){
    
    
    $('.container').append($('.A'))
  })
</script>

以上代码，把元素A插入到container的末尾，由于A是本身就存在的元素，所以会产生一个移动的效果。

输出结果：

请添加图片描述

删除节点

在原生DOM中，删除节点是比较麻烦的行为，要找到节点的父亲，然后从父亲把节点删掉。jQuery简化了该过程，谁调用方法，就删掉谁。

语法：

jQuery对象.remove()

克隆节点

如果需要拷贝一个节点，可以使用conle方法。

语法：

// 拷贝对象
jQuery对象.clone()
jQuery对象.clone(true)

这个clone会返回拷贝后的对象，如果传入true，那么会把该节点绑定的事件一起克隆。

需要注意的是，如果使用选择器$('选择器')的方法获取元素，这个元素有可能包含多个节点，此时多个节点会一起拷贝。

比如：

$('button').click(function(){
    
    
	let $newBox = $('.box').clone()
	$('.box').parent().append($newBox)
})

这个代码的功能，是点击按钮后，在box后追加一个相同的元素。假设起初只有一个box，那么第一次点击会增加一个box，第二次点击就会增加两个，第三次点击增加四个。

因为$('.box')会获取所有匹配的节点，第二次点击时，匹配到了两个节点，就会克隆两个节点。第三次点击时，匹配到了四个节点，克隆四个节点，以此类推。

$('button').click(function(){
    
    
	let $newBox = $('.box').first().clone()
	$('.box').parent().append($newBox)
})

处理这个问题，有很多种解决办法，目的就是在筛选元素时，只要一个符合条件的元素即可。比如使用.first()方法，每次都克隆第一个节点，这样就确保只会新增一个节点了。