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;

            width: 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();

        })

    })

})

巴特西

jQuery效果之显示与隐藏

最新文章

热门文章