IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> [jquery] 动画 show hide toggle,下拉显示---slideDown淡入淡出----fadeIn animate() 停止动画---stopfinish -> 正文阅读

[JavaScript知识库][jquery] 动画 show hide toggle,下拉显示---slideDown淡入淡出----fadeIn animate() 停止动画---stopfinish

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内第二次点击按钮,上轮动画(隐藏)还没完成呢,直接迅速完成,再开始新的动画(显示)

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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-11 17:25:59  更:2021-10-11 17:28:06 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:28:54-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码