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();
            })
        })
    })
    





  • 相关阅读:
    POJ 1321 棋盘问题
    算法导论 4.1 最大子数组问题
    矩阵快速幂
    固定定位
    HTML排版
    CSS笔记2
    HDU 1796 How many integers can you find(容斥原理)
    HDU 2147 kiki's game(博弈经典题)
    HDU 1846 Brave Game(巴什博弈超简单题)
    HDU 4704 Sum(隔板原理+组合数求和公式+费马小定理+快速幂)
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6876798.html
Copyright © 2011-2022 走看看