jQuery动画详解
css样式:
button{
display: block;
margin: 0px auto 20px;
}
div{
width: 200px;
height: 200px;
background: pink;
margin: 0 auto;
display: none;
}
HTML内容:
1. jQuery之动画详解–隐藏显现
show(), hide(), toggle()
jQuery部分:
显示 / 出现 标签对象.show()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="block"]').click(function(){
$('div').show(1000, 'linear' , function(){
console.log('标签显示了')
})
})
效果展示
隐藏 / 消失 标签对象.hide()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="none"]').click(function(){
$('div').hide(1000, 'linear' , function(){
console.log('标签隐藏了')
})
})
效果展示
隐藏显示切换 标签对象.toggle()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="toggle"]').click(function(){
$('div').toggle(1000, 'linear' , function(){
console.log('标签切换了')
})
})
效果展示
slideDown(),slideUp(),slideToggle().
jQuery部分:
下拉 显示 / 出现 标签对象.slideDown()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="block"]').click(function(){
$('div').slideDown(1000, 'linear' , function(){
console.log('标签下拉显示了')
})
})
效果展示
上卷 隐藏 / 消失 标签对象.slideUp()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="none"]').click(function(){
$('div').slideUp(1000, 'linear' , function(){
console.log('标签上拉隐藏了')
})
})
效果展示
隐藏显示切换 标签对象.slideToggle()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="toggle"]').click(function(){
$('div').slideToggle(1000, 'linear' , function(){
console.log('标签切换了')
})
})
效果展示
fadeIn(),fadeOut(),fadeToggle()
jQuery部分:
下拉 显示 / 出现 标签对象.fadeIn()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="block"]').click(function(){
$('div').fadeIn(1000, 'linear' , function(){
console.log('标签逐渐显示了')
})
})
效果展示
**上卷 隐藏 / 消失 标签对象.fadeOut() **
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="none"]').click(function(){
$('div').fadeOut(1000, 'linear' , function(){
console.log('标签逐渐隐藏了')
})
})
效果展示
隐藏显示切换 标签对象.fadeToggle()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
$('[name="toggle"]').click(function(){
$('div').fadeToggle(1000, 'linear' , function(){
console.log('标签切换了')
})
})
效果展示
作者：zying_hq
