jQuery动画详解

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

效果展示