jQuery 动画

一、3组基本动画

1.显示/隐藏 show()/hide()
·
2.淡入/淡出/切换 fadeIn()/fadeOut()/fadeToggle()
·
3.滑入/滑出/切换 slideDown()/slideUp()/slideToggle()

用法：（以show（）为例）

show(speed,callback)

参数1：动画持续的时间

参数2：回调函数（动画执行完毕后调用）

注：不传参数没有动画效果

$('div').show(1000);

二、自定义动画

1.animate()

  参数1：对象，里面传需要动画的样式
  
  参数2：动画的时间
  
  参数3：动画的执行效果（swing:秋千，摇摆，先加速后减速（默认），linear:匀速)
  
  参数4：回调函数

$('button').click(function(){
        $('.container')
        .animate({left:'400px'},1000)
        .animate({width:'200px',height:'200px'},1000,'linear')
        .animate({width:'100px',height:'100px'},1000,'linear')
        .animate({left:'10px'},1000,'swing',function(){
          // 回调函数 -- 动画执行完毕之后执行
          console.log('动画执行完毕了')
        })
      })

2.停止当前动画

stop()

参数1：clearQueue：是否清除动画队列 true/false(默认)

参数2：jumpToEnd：是否跳转到当前动画的最终效果 true/false(默认)

// 一般放在animate()前面
$(this).stop().animate({width:'100px',height:'100px'})

3.动画延时

delay()
设置一个延时来推迟执行队列中之后的项目

$('div').fadeIn(1000).delay(2000).fadeOut(1000)
// div显示之后 等待2秒钟 再隐藏

案例：京东轮播图

效果：

html:

<div class="container">
    <button>上一张</button>
    <div class="box">
      <img src="./imgs/u=126814066,3359646815&fm=111&gp=0.jpg" alt="呵呵1" title="哈哈1">
      <img src="./imgs/u=2905076213,369041929&fm=111&gp=0.jpg" alt="呵呵2" title="哈哈2">
      <img src="./imgs/u=327147282,174907861&fm=11&gp=0.jpg" alt="呵呵3" title="哈哈3">
      <img src="./imgs/u=389138611,34558533&fm=111&gp=0.jpg" alt="呵呵4" title="哈哈4">
    </div>
    <button>下一张</button>
    <div class="list">
      <div class="selected"></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

css:

.container {
      width: 600px;
      height: 300px;
      margin: 0 auto;
      margin-top: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .box {
      width: 500px;
      height: 100%;
      overflow: hidden;
      position: relative;
    }

    .box img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .box img:first-child {
      display: block;
    }

    .list {
      width: 200px;
      height: 30px;
      position: absolute;
      left: 200px;
      bottom: 0px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .list div {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #fff;
    }

    .list .selected {
      background-color: red;
      border: 1px solid red;
    }

js:

	  let count = 0
      let length = $('.box img').length
      $('button').eq(0).click(function () {
        count--
        if (count < 0) {
          count = length - 1
        }
        $('.box img').eq(count).fadeIn().siblings().fadeOut()
        $('.list div').eq(count).addClass('selected').siblings().removeClass('selected')
      })

      $('button').eq(1).click(function () {
        count++
        if (count > length - 1) {
          count = 0
        }
        $('.box img').eq(count).fadeIn().siblings().fadeOut()
        $('.list div').eq(count).addClass('selected').siblings().removeClass('selected')
      })

前端进阶精选：点此去