jQuery中的动画有关的方法

显示与隐藏

show() - 显示

hide() - 隐藏

<div id="box"></div>

<script>
  /*
            显示与隐藏
            1.无动画版本
              show() - 显示
              hide() - 隐藏
            2.有动画版本 - 同时改变宽度和高度
              show(speed,callback)
                spend - 动画执行的时长，单位为毫秒
                callback - 动画执行完毕后的回调函数
              hide(speed,callback)
                spend - 动画执行的时长，单位为毫秒
                callback - 动画执行完毕后的回调函数
        */

  $("#box").hide(3000, function () {
    $("#box").show(3000);
  });
</script>

滑动式动画

slideUp()方法

slideDown()方法

<div id="box"></div>

<script>
  /*
            滑动式动画 - slideUp()和slideDown()
              注意 - 没有无动画版本（底层代码预定义动画执行的时长）
              效果 - 改变指定元素的高度
        */

  $("#box").slideUp(3000);
  $("#box").slideDown(3000);
</script>

淡入淡出效果

fadeOut()方法

fadeIn()方法

 
<script>
  /*
            淡入淡出动画 - fadeOut()fadeIn()
              效果 - 改变指定元素的通明度
        */

  $("#box").fadeOut(3000);
  $("#box").fadeIn(3000);
</script>

动画切换效果

toggle()显示与隐藏

slideToggle()滑动式动画

fadeToggle()淡入淡出

<style>
  #box {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
</style>

<button id="btn">按钮</button>
<div id="box"></div>

<script>
  $("#btn").click(function () {
    // $('#box').toggle(3000);//显示与隐藏
    // $('#box').slideToggle(3000);//滑动式动画
    $("#box").fadeToggle(3000); //淡入淡出
  });
</script>

自定义动画

<style>
  #box {
    width: 200px;
    height: 200px;
    background-color: aqua;
    position: absolute;
  }
</style>

<div id="box"></div>

1.animate(properties,duration,callback) - properties - 表示 CSS 的样式属性 - 设置动画执行结束的样式属性值 - duration - 表示动画执行的时长，单位为毫秒 - callback - 表示动画执行完毕后的回调函数

// $('#box').animate({
//     width : 100,
//     height : 100
// },3000);

$("#box").animate(
  {
    left: 100,
  },
  3000
);

2.animate(properties,options)

- properties - 表示 CSS 的样式属性
    - 设置动画执行结束的样式属性值
- options - 表示设置动画的相关参数
- speed - 表示动画执行的时长，单位为毫秒
- callback - 表示动画执行完毕后的回调函数
- queue - 布尔值，设置是否添加到动画队列中

$("#box").animate(
  {
    left: 100,
  },
  {
    speed: 3000,
  }
);

并发与排队

并发效果 - 就是指多个动画同时执行

排队效果 - 就是指多个动画按照定义的先后顺序执行

/*
            并发效果 - 就是指多个动画同时执行
              多个CSS样式属性值同时改变 - 动画多个值综合效果
        */
//    $('#box').animate({
//        left : 400,
//        top : 400
//    },3000);

//     $('#box').animate({
//         left: 400,
//         top : 400
//     },{
//         duration : 3000,
//         queue : false
//     });

/*
             排队效果 - 就是指多个动画按照定义的先后顺序执行
              多个CSS的样式属性值先后改变
        */

// $('#box').animate({
//     left: 400,
// }, 3000,function(){
//     $('#box').animate({
//         top : 400,
//     },3000);
// });

/*
            queue - 用于控制当前动画效果是并发还是排队效果
              false- 是并发效果
              true - 是排队效果
        */

$("#box")
  .animate(
    {
      left: 400,
    },
    {
      duration: 3000,
    }
  )
  .animate(
    {
      top: 400,
    },
    {
      duration: 3000,
      queue: true,
    }
  );

animate()方法不支持的属性

animate()方法不支持的 css 样式:

• backgroundColor

• borderBottomColor

• borderLeftColor

• borderRightColor

• borderTopColor

• Color

• outineColor

停止执行动画

stop()方法

<button id="start">开始</button>
    <button id="stop">停止</button>
    <div id="box"></div>


    <script>
        $('#start').click(function () {
            $('#box').animate({
                left: 800
            }, 3000).animate({
                top: 600
            }, 3000)
        });

        $('#stop').click(function () {
            /*
                stop()方法没有接收任何参数时 - 立即停止执行动画
                stop(quece)方法的第一个参数
                  false - 表示停止当前动画，但队列中的动画继续执行
                  true - 表示停止当前动画，并且清空动画队列
                stop(quece,gotoEnd)方法的第二个参数
                  false - 不会做任何处理
                  true - 表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式

            */
            $('#box').stop(true, false);

延迟执行动画

delay()方法

<script>
  $("#box")
    .animate(
      {
        left: 800,
      },
      3000
    )
    .delay(1000)
    .animate(
      {
        top: 600,
      },
      3000
    );
</script>