zoukankan      html  css  js  c++  java
  • jQuery效果之显示与隐藏

    .hide([duration][,complete])——目标元素的隐藏。

    .show([duration][,complete])——目标元素的显示;

    .toggle([duration][,complete])——当目标元素隐藏时则显示。否则隐藏。

    注:可选參数[duration]为方法运行的时间区间;[,complete]为回调函数。

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>显示与隐藏</title>
        <script src="js/jquery-2.1.3.min.js"></script>
        <script src="js/my.js"></script>
        <style>
            div{
                background: #005599;
                 100px;
                height: 100px;
                margin: 5px;
                float: left;
            }
        </style>
    </head>
    <body>
    <img src="images/g.jpg"/>
    <button id="btn1">隐藏</button>
    <button id="btn2">显示</button>
    <button id="btn3">隐藏/显示</button>
    
    </body>
    </html>


    my.js代码部分:

    /*显示与隐藏*/
    $(document).ready(function(){
        //隐藏
        $('#btn1').click(function(){
            //$('img').hide();
            $('img').hide(1000);
        });
        //显示
        $('#btn2').click(function(){
            //$('img').show();
            $('img').show(1000);
        });
        //切换显示与隐藏
        $('#btn3').click(function(){
            //$('img').toggle();
            $('img').toggle(1000);
        });
        //利用hide()制作一个效果
        for(var i=0;i<5;i++){
            $("<div>").appendTo(document.body);
        }
        $('div').click(function(){
            $(this).hide(2000,function(){
                $(this).remove();
            })
        })
    })
    





  • 相关阅读:
    深入解析MySQL分区(Partition)功能
    使用mysqlreplicate命令快速搭建 Mysql 主从复制
    MySQL优化/面试,看这一篇就够了
    Nginx+Keepalived高可用集群
    高并发核心技术
    Redis详解
    memcached 常用命令及使用说明
    MemCached详解
    音频和视频
    frameset 和iframe框架标签
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6876798.html
Copyright © 2011-2022 走看看