关于JQuery动态显示与隐藏_jq 动态获取数据隐藏 csdn-CSDN博客

关于JQuery动态显示与隐藏

1.jquery_hide.html

Callback 函数在当前动画 100% 完成之后执行。

jQuery 动画的问题

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例子：$("p").hide("slow")

speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

实例

$("button").click(function(){

$("p").hide(1000);

});

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/lib/jquery/1.8.3/jquery.js"></script>
    <script type="text/javascript" src="js/my_jquery_hide.js"></script>

    
    

    <style type="text/css">
        div.ex {
            background-color: #e5eecc;
            padding: 7px;
            border: solid 1px #c3c3c3;
        }
    </style>

</head>

<body>

<h3>中国办事处</h3>
<div class="ex">
    <button class="hide" type="button">隐藏</button>
    <p>联系人：张先生<br/>
        北三环中路 100 号<br/>
        北京</p>
</div>

<h3>美国办事处</h3>
<div class="ex">
    <button class="hide" type="button">隐藏</button>
    <p>联系人：David<br/>
        第五大街 200 号<br/>
        纽约</p>
</div>

</body>
</html>

2.代码分析

2.1.jquery_load.html

2.2.jquery_hide.js

/**
* Created by kikop on 2017/6/6.
*/

$(document).ready(function () {

    //即是特定button的点击事件
    $(".ex .hide").click(function(){
        $(this).parents(".ex").hide("slow");
    });

});

高阶系列:

/**
* Created by kikop on 2017/6/6.
*/

$(document).ready(function () {

    //即是特定button的点击事件
    $(".ex .hide").click(function () {
        //$(this).parents(".ex").hide("slow");

        $(this).parents(".ex").hide(1000, function () {
            alert("The paragraph is now hidden");
        })
    });

});