jQuery动画

2019-07-23 本文已影响0人学的会的前端

展现和隐藏

.hide([duration ] [,easing ] [,complete ])
用于隐藏元素，没有参数的时候等同于直接设置display属性。

 $('.target').hide();
//等同于 $('.target').css('display', 'none')
//原生JS写法node.style.display = 'none'

.show( [duration ] [, easing ] [, complete ] )
用于显示元素，用法和hide类似.

$('xxx').show()
//原生JS写法node.style.display = 'block'

toggle( [duration ] [, easing ] [, complete ] )
事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置
用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似.。如果这个元素以前是隐藏的，那么点击就是展示，如果是展示的，点击就会隐藏。
相关参数含义：

1. duration：动画持续了多久
$('xxx').hide(1000) //用了1秒的时间去隐藏
2. easing:表示过渡使用哪种缓动函数，jQuery自身提供了'linear'和'swing'
//缓动函数就是指在变化的过程中是先快后面还是先慢后快等等，liner就是一个线性的变化
3. complete:在动画完成时执行的函数,是一个回调函数
$('xxx').hide(1000,function(){
  console.log('hide')
})
//动画执行完之后才会console.log出hide.

如果元素之前已经设置了display的值，那么变化的最终结果也会是这个设置的值，不会更改。比如div元素设置了display:inline-block，那么它hide之后再show的时候，最后的display还是inline-block。与原生Js比较，jQuery可以记住它原来的css属性。

<div class = "box" style = "display: inline-block">hello</div>
<button id = "btn-box1">hide</button>
<button id = "btn-box2">show</button>
<script>
$('#btn-box1').on('click',function(){
  $('.box').hide(5000)
})
$('#btn-box2').on('click',function(){
  $('.box').show(5000)
})
</script>

.fadeIn( [duration ] [, easing ] [, complete ] )
通过淡入的方式显示匹配元素，参数含义和上面相同
.fadeOut( [duration ] [, easing ] [, complete ] )
通过淡出的方式隐藏匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ] )
调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
.fadeToggle( [duration ] [, easing ] [, complete ] )
通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。

滑动

.slideDown( [duration ] [, easing ] [, complete ] )
用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
.slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。
slidedown,slideup的变化是有一个拉伸的效果，而hide()和show()的变化是整体的变大变小。

自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象，动画将根据这组对象移动。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

没有动画的时候，我们可以使用css设置元素的样式，但是如果想把这个样式变化变成连贯的，那么就要使用animate，设置这个参数后，就会从初始状态变成设置的状态，这个过程是渐变的，不是一下子就变成的。
写了动画的时候，不一定就会产生效果，也要和css相对应，例如想要实现移动效果，设置了top和left的值，要在原元素上添加position：relative，否则就算是设置了top或者left也不会有移动效果。

//多个动画的代码
$('#btn').on('click',function(){
  $div3.animate({ },function(){
    //function 是一个回调，相当于动画完成之后要做的事情
    $div3.animate({ },function(){
      ....
    })
  })
})
/*就是第一个动画完成之后，执行第二个动画，第二个动画执行完成之后，
执行第三个动画。。。。有几个动画就要嵌套几次。但是这个嵌套次数太多，代码不是很好，


所以animate就做了一个封装，代码如下：*/
//jQuery的链式调用
$div3.animate({ }).animate({ }).animate({ }).....


//第二种方案
$div3.animate({ });
$div3.animate({ });
....
$div3.animate({},function(){
  ...
})


//第三种优化方案：
//把所有的样式放到一个数组里面，用animate遍历这个数组
var actions = [
  {width: 80,height: 80,left: 0,top:0},
  {left: '200px'},
  ......
]
actions.forEach(function(action,idx){
  $div3.animate(action)
})

jQuery的链式调用

$div.hide().show().css()
因为 $div.hide()这个函数执行完成之后，return的还是原来的jQuery对象$ div。所以还可以继续.show()等。
等价于

$div.hide()
    .show()

.stop()和.finish()的区别

.finish：停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。
.stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画,若果当前队列没有执行完，点击stop，会立刻停止当前队列的执行。

<body>
  <button id="btn1">start</button>
  <button id="btn2">step+50</button>
  <button id="btn3">step-50</button>
  <button id="btn4">auto</button>
  <button id="btn5">reset</button>
  <button id="btn6">stop(false,false)</button>
  <button id="btn7">stop(true,false)</button>
  <button id="btn8">stop(true,true)</button>
  <button id="btn9">finish</button>
  
  <div class="container">
    <div class="box"></div>
  </div>
  
  <script>
    $('#btn1').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
    })
    $('#btn2').click(function(){
      $('.box').animate({
        left: '+=50'
      }, 1000)
    })
    $('#btn3').click(function(){
      $('.box').animate({
        left: '-=50'
      }, 1000)
    })
    $('#btn4').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      $('.box').animate({
        left: '100px',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })
    $('#btn5').click(function(){
      $('.box').animate({
        left: 0,
        top: 0
      }, 1000)
    })
    $('#btn6').click(function(){
      //停止当前动画
      $('.box').stop()
    })
    $('#btn7').click(function(){
      //停止当前动画，并清除未执行的动画队列
      $('.box').stop(true, false)
    })
    $('#btn8').click(function(){
      //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').stop(true, true)
    })
    $('#btn9').click(function(){
      //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').finish()
    })

  </script>

.clearQueue

清除动画队列中未执行的动画。

slideToggle()

$('.ct .item').on('click',function(){
  $(this).find('p').slideToggle()
})
//当点击元素的时候，从当前元素里面找到p.
//若.item内的P元素的内容展示出来了，点击事件则会隐藏内容，若没有展现出来，点击事件则会展现内容。

如果想实现点击某一个p的时候，内容展现出来，但是其他p的内容要隐藏起来。或者点击P1的时候，p1的内容展现，但是点击p2的时候，P2d的内容展现，但是p1的消失，也就是p2的兄弟节点的内容都消息

$('.ct .item').on('click',function(){
  $(this).find('p').sildeDown()
  //兄弟节点都去掉
  $(this).siblings().find('p').slideUp()
})