jQuery中的特效

show,hide(显示，隐藏)

在这里插入图片描述

滑动、卷动（slideUp()、sliderDown()）

在这里插入图片描述

淡入、淡出(fadeIn()、fadeOut())

在这里插入图片描述

自定义动画（animate）

在这里插入图片描述

Animate中累加累减的方案

在这里插入图片描述

[重点]自定义实现列队动画的方式，有两种：

1.在回调函数中再执行一个动画；
2.通过连缀或顺序来实现列队动画。
在这里插入图片描述

列队动画方法

//连缀无法实现按顺序列队
$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');

注意：如果动画方法，连缀可以实依次列队，而.css()方法不是动画方法，会在一开始传入列队之前。那么，可以采用动画方法的回调函数来解决。

//使用回调函数，强行将.css()方法排队到.slideDown()之后
$('#box').slideUp('slow').slideDown('slow', function () { 
$(this).css('background', 'orange');
});

在这里插入图片描述

使用.queue()方法

特点:提高代码的可读性
使用.queue()方法模拟动画方法跟随动画方法之后
在这里插入图片描述

.queue()中使用next,来继续执行之后的动画

在这里插入图片描述

动画相关方法

.stop(clearQueue, gotoEnd)。

参数介绍：

clearQueue 传递一个布尔值，代表是否清空未执行完的动画列队；
-gotoEnd 代表是否直接将正在执行的动画跳转到末状态；

//强制停止运行中的
$(’.stop’).click(function () {
$(’#box’).stop();
});

//带参数的强制运行
$(’.animate’).click(function () {

$(’#box’).animate({
‘left’ : ‘300px’
}, 1000);

$(’#box’).animate({
‘bottom’ : ‘300px’
}, 1000);

$(’#box’).animate({
‘width’ : ‘300px’
}, 1000);

$(’#box’).animate({
‘height’ : ‘300px’
}, 1000);
});

$(’.stop’).click(function () {
$(’#box’).stop(true ,true);
});

有时在执行动画或列队动画时，需要在运动之前有延迟执行，jQuery 为此提供了.delay()方法。这个方法可以在动画之前设置延迟，也可以在列队动画中间加上。

//开始延迟 1 秒钟，中间延迟 1 秒
$('.animate').click(function () {
$('#box').delay(1000).animate({
'left' : '300px'
}, 1000);
 
$('#box').animate({
'bottom' : '300px'
}, 1000);
 
$('#box').delay(1000).animate({
'width' : '300px'
}, 1000);
 
$('#box').animate({
'height' : '300px'
}, 1000);
});
 
//停止正在运动的动画，并且设置红色背景
$('.button').click(function(){
$('div:animated').stop().css('background', 'red');
});

动画全局属性

jQuery 提供了两种全局设置的属性，分别为： $.fx.interval，设置每秒运行的帧数；$ .fx.off，关闭页面上所有的动画。
$.fx.interval 属性可以调整动画每秒的运行帧数，默认为 13 毫秒。数字越小越流畅，但可能影响浏览器性能。

//设置运行帧数为 1000毫秒
$.fx.interval = 1000;//默认为 13
$('.button').click(function () {
$('#box').toggle(3000);
});

$.fx.off 属性可以关闭所有动画效果，在非常低端的浏览器，动画可能会出现各种异常问题导致错误。而 jQuery 设置这个属性，就是用于关闭动画效果的。

//设置动画为关闭 true
$.fx.off = true; //默认为 false