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('标签切换了')
        })
    }) 
  • 相关阅读:
    获取mysql数据库中的表信息
    Django Rest Framework --- 分页器组件
    Django Rest Framework --- 频率组件
    Django Rest Framework --- 权限组件
    Django Rest Framework --- 认证组件
    Django Rest Framework --- 视图组件
    序列化组件
    restful规范,cbv源码执行流程,drf之APIView及Respons源码分析
    前后台分离式开发(文件的上传下载),cookie(存放在前台),session(存放在后台)
    ajax,分页器
  • 原文地址:https://www.cnblogs.com/littlestarlx/p/12573864.html
Copyright © 2011-2022 走看看