zoukankan      html  css  js  c++  java
  • 详解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('标签切换了')
        })
    }) 
  • 相关阅读:
    iOS:TabBarController 显示/隐藏第一级页面的TabBar
    iOS : Blur Effect
    ASIHTTPRequest / ASIFormDataRequest
    Xcode :Missing file warnings
    Axure设计软件下载安装及注册
    windows服务更改配置文件
    sql server 清理数据库日志
    sql server 随机生成布尔值
    sql server 授权相关命令
    用VS2015创建ASP.NET Web Forms 应用程序
  • 原文地址:https://www.cnblogs.com/littlestarlx/p/12573864.html
Copyright © 2011-2022 走看看