天天看点

JQuery 效果之隐藏与显示、淡入淡出、滑动、回调

1、隐藏

hide();

show();

toggle();

2、淡入淡出

slideDown();

slideUp();

slideToggle();

3、回调(当动画完成后调用)

代码如下:

HTML 部分:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>隐藏与显示、淡入淡出、滑动、回调</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="xiaoguo.js"></script>
    <style type="text/css">
        div{
            background-color: bisque;
            width: px;
            height: px;
            float: left;
            margin: px;
        }

        #d4,#d5,#d6,#d7{
            width: %;
            height: px;
            padding: px;
            background-color: bisque;
            text-align: center;
            margin:px;
        }

        #d5{
            padding: px;
            display: none;
            background-color: aliceblue;
        }
    </style>
</head>
<body>

<p id="p1">把我隐藏起来</p>
<button id="b1">隐藏</button>
<button id="b2">显示</button>
<button id="b3">隐藏/显示</button>

<br/>
<br/>

<script>
    for(var i=;i<;i++) {
        $("<div>").appendTo(document.body);
    }
        $("div").click(function(){
            $(this).hide(,function(){  //隐藏并没有删除  所以可以定义函数删除
                $("this").remove();
            });
        });

</script>


<button id="b4">fadeIn</button>
<button id="b5">fadeOut</button>
<button id="b6">fadeToggle</button>
<button id="b7">fadeTo</button>

<br/>
<div id="d1" style="width: 80px;height: 80px;background-color: blanchedalmond;display: none"></div>
<div id="d2" style="width: 80px;height: 80px;background-color: coral;display: none"></div>
<div id="d3" style="width: 80px;height: 80px;background-color: crimson;display: none"></div>

<br/>


<div id="d4">出现</div>
<div id="d6">隐藏</div>
<div id="d7">隐藏&出现</div>
<div id="d5">滑动出来的内容部分</div>



<button id="b8">隐藏回调</button>
<p id="p2">回调测试</p>

</body>
</html>
           

Javascript部分

/**
 * Created by qing on 2015/8/20.
 */



$(document).ready(function(){
    //隐藏  并未移除
    $("#b1").click(function () {
        $("#p1").hide(); //参数:所需时间 1000毫秒即1秒
    });

    //显示
    $("#b2").click(function () {
        $("#p1").show(); //参数:所需时间 毫秒
    });

    //隐藏&显示
    $("#b3").click(function () {
        $("#p1").toggle(); //参数:所需时间 毫秒
    });

    //淡入
    $("#b4").on("click",function(){
        $("#d1").fadeIn(),
        $("#d2").fadeIn(),
        $("#d3").fadeIn()
    });

    //淡出
    $("#b5").on("click",function(){
        $("#d1").fadeOut(),
            $("#d2").fadeOut(),
            $("#d3").fadeOut()
    });

    //淡入&淡出
    $("#b6").on("click",function(){
        $("#d1").fadeToggle(),
            $("#d2").fadeToggle(),
            $("#d3").fadeToggle()
    });

    //透明度变化
    $("#b7").on("click",function(){
            $("#d1").fadeTo( ,),
            $("#d2").fadeTo(,),
            $("#d3").fadeTo(,)
    });

    //滑动出现
    $("#d4").click(function(){
        $("#d5").slideDown();
    });

   //滑动隐藏
    $("#d6").click(function(){
        $("#d5").slideUp();
    });

    //滑动隐藏&出现

    $("#d7").click(function(){
        $("#d5").slideToggle();
    });


    //回调,

    $("#b8").click(function(){
        //$("#p2").hide(1000, function () {
            //alert("动画完成,执行了回调函数");
        //});

        //执行多个动画
            $("#p2").css("color","red").slideUp().slideDown();

    });

});