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

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

基本动画

1. show()：显示元素
2. hide()：隐藏元素
3. 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');
})
});

淡入淡出动画

1. fadeIn()：淡入
2. fadeOut()：淡出
3. 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】动画基本动画拉下卷起动画淡入淡出动画自定义动画的全部内容，希望文章能够帮你解决【JQuery】动画基本动画拉下卷起动画淡入淡出动画自定义动画所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。