jquery基础学习之动画篇(四)

时间:2023-03-09 05:48:09
jquery基础学习之动画篇(四)

一,动画效果


hide() show() 隐藏与显示

hide(options) 隐藏 对应display:none,有参数就会变成动画,
$(document).click(function () {
// $('.div1').hide('slow');//慢速隐藏

})
hide(speed,callback)

toggle() 切换隐藏与显示

$(document).click(function () {
$('.div1').hide('slow',function () {
console.log(1)//完成后执行
//$('.div1').show('slow')//整个函数的意思是先隐藏,然后再显示,这句还能用下面的代替
$('.div1').toggle('slow')//取反
});

})


下拉与上卷动画

下拉动画 slideDown(speed,cb)
上卷动画slideUp(speed,cb)

$(document).click(function () {
$('.div2').add('.div3').slideUp(3000);
$('.div2').add('.div3').slideDown(3000);

})

slideToggle() 上卷下拉切换 同toggle()


淡入淡出动画 fadeIn fadeOut

这个设置的是元素的opacity
fadeIn(speed,cb)

fadeToggle() 淡入淡出切换 用法都相同

$(document).click(function () {
$('.div4').fadeToggle(3000);
})

fadeTo(speed,opacity,cb)

淡入效果停到某一个透明值,不像前两个要么是0,要么是1

$(document).click(function () {
$('.div5').fadeTo(3000,0.5);//让效果到0.5透明度

})

jQuery中toggle与slideToggle以及fadeToggle的比较

toggle,对应的是show,hide,改变display
slideToggle,对应的是slideDown,slideUp ,改变的是height
fadeToggle,对应的是fadeIn,fadeOut,改变的是opacity

注意:

基本用法:函数名(speed,cb)
这些动画设置的slow 200 fast 600 默认 400
这些动画的如果隐藏了会不占用文档空间


animate 更强大的动画功能

//animate(参数,speed,cb)
参数必须是数字,可以是个对象,里面各种键值对,样式名称用dom名称,比如font-size写成fontSize吗
使用队列功能,一个元素的好几个animate会逐条执行,比如参数设置了变化宽,高,颜色,那么它执行的时候会先变宽,然后高,然后颜色,而不会直接一步到位

所谓队列,就像排队买东西一样,先来的先买,买完走人离开队列,最后来的排到最后面

animate( properties, options )
如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次

stop 停止动画
stop() 动画队列如果有多个动画,停止当前执行的动画,开始下一个动画
stop(true) 真正的停止,当前动画停止,队列里后续动画也不执行
stop(true,true) 当前动画动作停止,并且直接展示所有动画完成后的最终状态

动画里的回调

因为动画是异步的,如果一个函数不是他的回调,会先函数后动画,如果是回调,会先执行动画后函数