[jquery] 动画 show hide toggle，下拉显示---slideDown,淡入淡出----fadeIn, animate() ,停止动画---stop,finish

最新推荐文章于 2024-05-16 10:00:15 发布

533_

最新推荐文章于 2024-05-16 10:00:15 发布

阅读量492

点赞数 2

分类专栏： # jquery 文章标签： jquery 动画 javascript

本文链接：https://blog.csdn.net/qq_14993591/article/details/120689914

版权

jquery 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

- jQuery 的动画函数 :

jQuery 的动画函数 :

1. jQuery 的基础动画 show() hide() toggle()

<style>
* {
  margin: 0;
  padding: 0;
}
div {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>

<button>显示</button>
<button>隐藏</button>
<button>切换</button>

<div></div>

<script src="./jquery/jquery.min.js"></script>

// 1. show() - 显示
$('button:first').click(() => {
  $('div').show(500, 'linear', () => console.log('显示结束了'))
})


// 2. hide() - 隐藏
$('button').eq(1).click(() => {
  $('div').hide(500, 'linear', () => console.log('隐藏结束了'))
})


// 3. toggle() - 切换
$('button:last').click(() => {
  $('div').toggle(500, 'linear', () => console.log('切换结束了'))
})

在这里插入图片描述

2. jQuery 的折叠动画 slideDown() slideUp() slideToggle()

  1. slideDown() - 下拉显示
  2. slideUp() - 上拉隐藏
  3. slideToggle() - 切换显示和隐藏

  以上三个方法的参数
    => 参数1: 运动时间, 单位是 ms
    => 参数2: 运动曲线
    => 参数3: 运动结束的回调函数

<style>
* {
  margin: 0;
  padding: 0;
}

div.inner {
  width: 300px;
  height: 300px;
  background-color: pink;
}

div.outer {
  width: 300px;
  height: 300px;
}
</style>

<button>显示</button>
<button>隐藏</button>
<button>切换</button>

<div class="outer">
  <div class="inner"></div>
</div>

<script src="./jquery/jquery.min.js"></script>

在这里插入图片描述

    //  slideDown() - 下拉显示
    $('button').eq(0).click(() => {
      $('div.inner').slideDown(3000, 'linear', () => console.log('显示结束了'))
    })


    // slideUp() - 上拉隐藏
    $('button').eq(1).click(() => {
      $('div.inner').slideUp(2000, 'linear', () => console.log('隐藏结束了'))
    })


    // slideToggle() - 切换显示和隐藏
    $('button').eq(2).click(() => {
      $('div').slideToggle(2000, 'linear', () => console.log('切换结束了'))
    })

在这里插入图片描述

3. jQuery 的渐隐渐显动画 fadeIn() fadeOut() fadeToggle()

  1. fadeIn() - 淡入
  2. fadeOut() - 淡出
  3. fadeToggle() - 切换显示和隐藏
 
  以上三个方法的参数
    => 参数1: 运动时间, 单位是 ms
    => 参数2: 运动曲线
    => 参数3: 运动结束的回调函数

  4. fadeTo()
    => 参数1: 运动时间, 单位是 ms
    => 参数2: 指定透明度
    => 参数3: 运动曲线
    => 参数4: 运动结束的回调函数

    // fadeIn 显示
    $('button').eq(0).click(() => {
      $('div.inner').fadeIn(500, 'linear', () => console.log('显示结束了'))
    })


    // fadeOut 隐藏
    $('button').eq(1).click(() => {
      $('div.inner').fadeOut(500, 'linear', () => console.log('隐藏结束了'))
    })


    // fadeToggle 切换
    $('button').eq(2).click(() => {
      $('div.inner').fadeToggle(500, 'linear', () => console.log('切换结束了'))
    })


    // fadeTo 指定透明度
    $('button').eq(3).click(() => {
      $('div.inner').fadeTo(500, 0.5, 'linear', () => console.log('切换结束了'))
    })

在这里插入图片描述

4. jQuery 的综合动画 animate()

什么样式都能运动
但是颜色不行, 2D和3D 变化不行
语法: 元素集合.animate()
=> 参数1: 对象数据类型, 你要运动的样式
=> 参数2: 运动时间, 单位是 ms
=> 参数3: 运动曲线
=> 参数4: 运动结束的回调函数

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
  </style>
</head>
<body>

  <button>走你</button>

  <div></div>

$('button').click(() => {
  $('div').animate({
    width: 500,
    height: 300,
    borderRadius: '50%',
    left: 100,
    top: 100
  }, 1000)
})

在这里插入图片描述

5. jQuery 的停止动画 stop( ) finish( )

stop( )
=> 语法: 元素集合.stop( )
=> 作用: 当这句代码执行的时候,马上停止元素集合内所有元素的当前动画
=> 不管动画运动到什么阶段 , 运动到什么位置就停止在什么位置，(虽然停了，此次运动也结束了)
finish( )
=> 语法: 元素集合.finish( )
=> 作用: 当这句代码执行的时候,马上停止元素集合内所有元素的当前动画
=> 不管动画运动到什么位置, 直接去到动画结束位置

用法:

    + 当你需要给一个元素添加动画的时候

    + 都会在前面先书写一次 stop 或者 finish

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>

  <button>停止</button>
  <button>完成</button>
  <button>切换</button>

  <div></div>

 $('button').eq(0).click(() => {
   // 让动画马上停下来，这轮运动结束了
   $('div').stop()
 })

 $('button').eq(1).click(() => {
   // 让动画马上完成，这轮运动结束了
   $('div').finish()
 })

 $('button').eq(2).click(() => {
	// 切换
   $('div').toggle(3000)
 })

在这里插入图片描述

    $('button').eq(2).click(() => {
      // 先让没运动完 的元素的 动画 停下来, 然后再开始新的动画
      $('div').stop().toggle(3000)
    })

在这里插入图片描述
在3000ms内第二次点击按钮，上轮动画（隐藏）还没完成呢，直接停下来，不继续隐藏了，直接开始新的动画（显示）

下图是迅速连续多次点击的效果

在这里插入图片描述

    $('button').eq(2).click(() => {
      // 先让没运动完 的元素的 动画 迅速完成, 然后再开始新的动画
      $('div').finish().toggle(5000)
    })

在这里插入图片描述

在3000ms内第二次点击按钮，上轮动画（隐藏）还没完成呢，直接迅速完成，再开始新的动画（显示）

下图是迅速连续多次点击的效果
在这里插入图片描述

533_

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
[jquery] 动画 show hide toggle，下拉显示---slideDown,淡入淡出----fadeIn, animate() ,停止动画---stop,finish

jQuery 的动画函数 :1. jQuery 的基础动画 show() hide() toggle()<style>* { margin: 0; padding: 0;}div { width: 200px; height: 200px; background-color: pink;}</style><button>显示</button><button>隐藏</button><butt
复制链接

扫一扫