详解jQuery动画

Posted littlestarlx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了详解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(‘标签切换了‘)
    })
}) 

以上是关于详解jQuery动画的主要内容,如果未能解决你的问题,请参考以下文章

几个非常实用的JQuery代码片段

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

jQuery动画详解

在jquery中切换动画

jQuery 源码解析(三十一) 动画模块 便捷动画详解