zoukankan      html  css  js  c++  java
  • jq常用动画fade slide

    https://www.cnblogs.com/sandraryan/

    hide();

    <div class="box">big box</div>
    $('.box').hide(5000, function(){ console.log('hhhhh'); }); //hide() h设置隐藏元素 //5000 是用5000ms内实现这个元素消失效果 // 内部函数是回调函数callback,是5000ms后调用的函数
       //也可以不接收参数
       //接收的参数是时间值 和 一个执行结束后的回调

    (css样式省略)

    浏览器中元素会逐渐消失,消失后控制台打印内容

    show();

       .hide-box {
            height: 200px;
            background-color: rgb(25, 99, 25);
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            color: white;
            display: none;
        }
    
    
        <div class="hide-box">big box</div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    
        <script>
            $('.hide-box').show(5000, function(){
                console.log('hhhhh');
            });
       </script>

    show(); 让一个隐藏的按钮显示

    举个栗子:

    点击按钮让图片切换隐藏显示

     .box {
            height: 200px;
            background-color: rgb(25, 99, 25);
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            color: white;
        }
    
    
        <button class="btn">button</button>
        <div class="box">big box</div>
     $('.btn').click(function(){
                $('.box').toggle(5000,function(){
                    console.log(11);
                    
                });
            });
            // 可以不接收参数
            // 可以接受一个时间参数,作为切换的时间
            //也可以接受一个回调函数,执行一次切换执行一次回调

    fadeIn() 淡入已隐藏的元素。

    fadeOut() 淡出可见元素。

    fadeToggle() 切换。

    fadeTo()  渐变为给定的不透明度(值介于 0 与 1 之间)。需要给一个透明度的值作为参数。

    接受的时间值,除了数字也可以是slow fast。

     
    <button class="btn">button</button>
     <div class="box">big box</div>
    
    $('.btn').click(function(){
            $('.box').fadeToggle(3000);
        });

    slideDown()  向下滑动元素。

    slideUp()    上滑动元素。

    slideToggle()  上下滑的切换。

  • 相关阅读:
    谈谈对MapTask任务分配和Shuffle的理解
    Yarn的资源调优
    @section Scripts{}的使用
    数据提高查询速度的方法(摘抄)
    customErrors 元素(ASP.NET 设置架构)
    成员资格、授权和安全性(一)
    MVC5发展历程,从MVC2谈起
    轻量级记事本工具:CintaNotes
    CF459E Pashmak and Graph [dp]
    【模板】拉格朗日插值
  • 原文地址:https://www.cnblogs.com/sandraryan/p/11525968.html
Copyright © 2011-2022 走看看