详解JQUery动画

1.显示隐藏

（1）运动轨迹：从左上角开始动画，显示是从左上角开始显示，隐藏是向左上角隐藏。

（2）参数

参数1 : 毫秒（ 也就是动画的执行时间）；
参数2 : 速度（运动的方式 linear 线性—>匀速运动）；
参数3 : 回调函数 （当运动结束时,执行的函数程序）；

（3）显示隐藏的切换：

标签对象.show() ——让隐藏的标签,显示

$('div').show(1000, 'linear' , function(){
console.log('标签显示了')
})

标签对象.hide()——让显示的标签,隐藏

$('div').hide(1000, 'linear' , function(){
console.log('标签隐藏了')
})

标签对象.toggle()——切换：隐藏和显示相互切换

$('div').toggle(1000, 'linear' , function(){
console.log('标签显示隐藏切换了')
})

2.上拉下拉

（1）运动轨迹：从标签位置的上边距开始，显示；从上边距开始向下显示，隐藏
。
（2）参数

参数1 : 毫秒（ 也就是动画的执行时间）；
参数2 : 速度（运动的方式 linear 线性—>匀速运动）；
参数3 : 回调函数 （当运动结束时,执行的函数程序）；

（3）上拉下拉的切换：

标签对象.slideDown()——下拉（显示）

$('div').slideDown(1000, 'linear' , function(){
console.log('标签下拉显示了')
})

标签对象.slideUp()——上拉（隐藏）

$('div').slideUp(1000, 'linear' , function(){
console.log('标签下拉隐藏了')
})

标签对象.slideToggle()——隐藏显示切换

$('div').slideToggle(1000, 'linear' , function(){
console.log('标签下拉上拉切换了')
})

3.渐隐渐现

（1）运动轨迹：从标签位置的上边距开始，显示；从上边距开始向下显示，隐藏。

（2）参数

参数1 : 毫秒（ 也就是动画的执行时间）；
参数2 : 速度（运动的方式 linear 线性—>匀速运动）；
参数3 : 回调函数 （当运动结束时,执行的函数程序）；

（3）显示隐藏与切换：

标签对象.fadeIn()——显示

$('div').fadeIn(1000, 'linear' , function(){
console.log('标签逐渐显示了')
})

标签对象.fadeOut()——隐藏

$('div').fadeOut(1000, 'linear' , function(){
console.log('标签逐渐隐藏 了')
})

标签对象.fadeToggle()——隐藏显示切换

$('div').fadeToggle(1000, 'linear' , function(){
console.log('标签切换了')
})

4.切换到指定透明度

（1）display: none; 和 opacity 都可以

（2）参数

参数1 : 毫秒 （也就是动画的执行时间）；
参数2 : 透明度 （小数表示，如0.5或.5）；
参数3 : 速度（运动的方式 linear 线性—>匀速运动）；
参数4 : 回调函数 （当运动结束时,执行的函数程序）；

（3）语法：标签对象.fadeTo()

$('div').fadeTo(1000 , 0.5 , 'linear' , function(){
console.log('标签到指定透明度了')
})

4.自定义动画

（1）参数

参数1 : 对象 {属性：属性值}；
参数2 : 毫秒 （也就是动画的执行时间）；
参数3 : 速度（运动的方式 linear 线性—>匀速运动）；
参数4 : 回调函数 （当运动结束时,执行的函数程序）；

（2）语法：标签对象.animate()

$("#box").animate({
width:0,
height:0,
left:50,
top:80
},2000,function(){
alert("结束了");
});

• 点赞 1
• 收藏
• 分享
• 文章举报