jQuery动画详解

css样式:

button{
display: block;
margin: 0px auto 20px;
}
div{
width: 200px;
height: 200px;
background: pink;
margin: 0 auto;
display: none;
}

HTML内容:

<button name="block">点我出现</button><br>
<button name="none">点我消失</button><br>
<button name="toggle">点我切换</button><br>
<div></div>

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('标签切换了')
})
})

效果展示

2. jQuery之动画详解–下拉上卷

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('标签切换了')
})
})

效果展示

3.jQuery之动画详解–渐隐渐显

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('标签切换了')
})
})

效果展示

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