04、jQuery扩展

自定义动画

动画DOM及其CSS操作

原理：我们只需要以固定的时间间隔（例如，0.1秒），每次DOM元素的CSS样式修改一点（例如，高宽各增加10%），看起来就像动画了

 

animate({ }, time)        //实现任意动画效果

// { }里面写最终效果(DOM元素的CSS样式)；time表示时间，毫秒为单位，1秒 = 1000毫秒。如：

$('#dd').animate({
opcity:0.5,
width : '100px',
height: '100px'
} , 3000 );              //3秒内，宽高都变成100px，透明度为50%

 

delay()      //实现动画暂停

function dh(){
$('div').stop()        //停止当前div正在运行的动画
.animation( {'width' : '0%'} , 1000 )
.delay(1000)          //动画暂停1秒钟
.animation( {'width' : '100%'} , 1000 );
}

 

stop()      //停止当前正在运行的动画

$('div').stop();     //停止当前div正在运行的动画

 

 

动画函数

显示/隐藏效果

show/hide()

//直接以 无参形式调用show() 和 hide()，会显示和隐藏DOM元素，但是只要传递一个时间参数进去，竟会变成了动画

$('#dd').show(3000);      //该div 三秒内逐渐显示

$('#dd').hide(3000);        //该div 三秒内逐渐隐藏

toggle()

//如果动画为show，执行toggle变成hide；如果动画为hide，执行toggle变成show

$('#dd').toggle(3000);      //该div 三秒内逐渐  隐藏/显示

 

 

淡入淡出效果

fadeIn/fadeOut()

$('#dd').fadeIn(3000);      //该div 三秒内逐渐  淡入（出现）

$('#dd').fadeOut(3000);       //该div 三秒内逐渐   淡出（隐藏）

fadeToggle()

//如果动画为fadeIn，执行fadeToggle变成fadeOut；如果动画为fadeOut，执行fadeToggle变成fadeIn

$('#dd').fadeToggle(3000);       //该div 三秒内逐渐   淡入/淡出

 

 

上卷下拉效果

slideUp/slideDown()         //在垂直方向逐渐展开或收缩

$('#dd').slideUp(3000);      //该div 三秒内逐渐  往上收缩（隐藏）

$('#dd').slideDown(3000);      //该div 三秒内逐渐  往下展开（显示）

slideToggle()

//如果动画为slideUp，执行slideToggle变成slideDown；如果动画为slideDown，执行slideToggle变成slideUp

$('#dd').slideToggle(3000);       //该div 三秒内逐渐   上卷/下拉

 

计时器（建议js原生）

setTimeout

setInterval