<button>按钮</button>
<div></div>

div {width: 100px;height: 100px;padding: 10px;background: lightcoral;
}

基本动画

show()：显示元素
hide()：隐藏元素
toggle()：显示 → 隐藏；隐藏 → 显示

隐藏就是设置了 display:none;
接收 2 个参数：[time]、[fn]
1. time：动画执行的时长，不设置就没有过渡效果
2. fn：回调函数，动画完成后自动执行

$('button').click(() => {$('div').toggle(1000, () => {console.log('finish animation');})
});

拉下卷起动画

slideDown()：打开
slideUp()：收起
slideToddle()：打开 → 收起；收起 → 打开
隐藏就是设置了 display:none;
接收 2 个参数：[time]、[fn]
1. time：动画执行的时长，不设置就没有过渡效果
2. fn：回调函数，动画完成后自动执行

$('button').click(() => {$('div').slideToggle(1000, () => {console.log('finish slide');})
});

淡入淡出动画

fadeIn()：淡入
fadeOut()：淡出
fadeToggle()：淡入 / 淡出

隐藏就是设置了 display:none;
接收 2 个参数：[time]、[fn]
1. time：动画执行的时长，不设置就没有过渡效果
2. fn：回调函数，动画完成后自动执行

$('button').click(() => {$('div').fadeToggle(1000, () => {console.log('finish fade');})
});

fadeTo()：在指定时长内，将透明度修改到指定的值

接收 4 个参数：speed、opacity、easing、fn
1. speed：3 种预定速度的字符串 slow、normal、fast，或表示动画时长的毫秒数值 ( eg：1000 )
2. opacity：表示透明度的数字 0 ~ 1
3. [easing]：动画效果，JQuery 提供匀速linear、慢入慢出swing(默认)
4. [fn]：在动画完成时执行的函数，每个元素执行一次

$('button').click(() => {$('div').fadeTo(1000, 0.5, () => {console.log('finish fadeTo');})
});

自定义动画

`animate()`

用于创建自定义动画的函数
接收 4 个参数：params、[speed]、[easing]、[fn]
- params：一个对象｛属性名 ( 需要修改的属性 ) ：属性值 ( 修改的值 ) ｝
- speed：3 种预定速度的字符串 slow、normal、fast，或表示动画时长的毫秒数值 ( eg：1000 )
- easing：动画效果，JQuery 提供匀速linear、慢入慢出swing(默认)
- fn：在动画完成时执行的函数，每个元素执行一次

$('button').click(() => {$('div').animate({width: 200,height: 200}, 2000, 'linear', () => {console.log('动画执行完毕');});
});

一般来说，回调函数内的 this 指向当前 DOM 元素，此时我们可以通过 fn 参数设置动画的先后顺序

$('button').click(() => {$('div').animate({width: 500,}, 1000, 'linear', function () {console.log('finish width');$(this).animate({ // 注意将 this 转成 JQuery 对象height: 500}, 1000, 'swing', () => {console.log('finish height');})});
});

动画队列：如果给同一个元素，添加多个 animate() 动画，先设置的动画先执行（与上述代码等效）

$('button').click(() => {$('div').animate({ // 先设置，先执行width: 500,}, 1000, 'linear', function () {console.log('finish width');});$('div').animate({ // 后设置，后执行height: 500}, 1000, 'swing', () => {console.log('finish height');})
});

`stop()`

用于停止动画的执行
接收 2 个参数：clearQueue、jumpToEnd
1. clearQueue：默认 false → 不清空动画队列，继续下一个动画；true → 清空队列，立即结束动画
2. jumpToEnd：默认 false → 停止当前动画；true → 立即完成当前动画

$('button.start').click(() => { // 生成动画队列$('div').animate({width: 500,}, 2000, 'linear', function () {console.log('finish width');});$('div').animate({height: 500}, 2000, 'swing', () => {console.log('finish height');})
});$('button.1').click(() => { // 立即结束当前动画，继续下一个动画$('div').stop(false, false);
})$('button.2').click(() => { // 立即完成当前动画，继续下一个动画$('div').stop(false, true);
})$('button.3').click(() => { // 立即结束当前动画，且不会继续执行$('div').stop(true, false);
})$('button.4').click(() => { // 立即完成当前动画，且不会继续执行$('div').stop(true, true);
})

<button class="start">开始</button>
<button class="1">false, false</button>
<button class="2">false, true</button>
<button class="3">true, false</button>
<button class="4">true, true</button>
<div class="box"></div>

div {margin: 10px;width: 100px;height: 100px;background: lightblue;
}

一般运用场景

$('button.left').click(() => {$('div').stop().animate({ // 使用 stop() 函数left: 500,}, 2000);
});$('button.down').click(() => { // 使用 stop() 函数$('div').stop().animate({top: 500,}, 2000)
});

<button class="left">左移</button>
<button class="down">下移</button>
<div class="box"></div>

这样就能在我点击后，停止正在执行的动画，并立即执行我点击的动画

`finish()`

立即完成当前元素所有的动画

$('button.start').click(() => { // 生成动画队列$('div').animate({width: 500,}, 2000);$('div').animate({height: 500}, 2000)
});$('button.finish').click(() => {$('div').finish();
})

<button class="start">开始</button>
<button class="finish">完成</button>
<div class="box"></div>

`delay()`

设置动画延迟
接收 1 个参数：duration 延迟的时间，单位：毫秒

$('button.start').click(() => { // 生成动画队列$('div').delay(1000).animate({width: 500,}, 2000);
});

`is(':animated')`

:animated 是一个过滤器，匹配设置了动画的标签元素
is(exp) 是一个筛选器，判断该 JQuery 对象是否含有与 exp 匹配的元素，返回布尔值
is(':animated') 用于判断当前元素是否有动画在执行
返回 true → 有动画正在执行；返回 false → 无动画正在执行

$('button.detection').click(() => {console.log($('div').is(':animated'));
})

【JQuery】动画相关推荐

js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
JQuery-学习笔记05【高级——JQuery动画和遍历】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流浏览器, 包括 IE 6!开发时常用 jquery.js,上线用 jquery.min.js. jq插件目前jQuery有三个大版本: (1)1.x.x: 兼容ie ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些一.总结一句话总结: 二.jquery动画函数有哪些原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
[原创]jQuery动画弹出窗体支持多种展现方式
今天刚写的利用jQuery动画弹出窗体,支持了string.Ajax.iframe.controls四种展现方式,具体细节下面慢慢介绍,先看效果图. 动画效果从哪个对象上触发的即从该对象开始逐渐向屏 ...
jquery动画切换引擎插件 Velocity.js 学习01
一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

【JQuery】动画

基本动画

拉下卷起动画

淡入淡出动画

`fadeTo()`：在指定时长内，将透明度修改到指定的值

自定义动画

`animate()`

`stop()`

一般运用场景

`finish()`

`delay()`

`is(':animated')`

【JQuery】动画相关推荐

最新文章

热门文章

【JQuery】动画

基本动画

拉下卷起动画

淡入淡出动画

fadeTo()：在指定时长内，将透明度修改到指定的值

自定义动画

animate()

stop()

一般运用场景

finish()

delay()

is(':animated')

【JQuery】动画相关推荐

最新文章

热门文章

`fadeTo()`：在指定时长内，将透明度修改到指定的值

`animate()`

`stop()`

`finish()`

`delay()`

`is(':animated')`