前端（jQuery）（4）-- jQuery隐藏显示与淡入淡出、滑动、回调

1、隐藏与显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide(1000);/*慢慢隐藏*/
            });
            $("#show").click(function(){
                $("p").show(1000);/*慢慢显示*/
            });
            $("#btn3").click(function(){
                $("p").toggle(1000);/*一个按钮实现隐藏和显示*/
            });
        });
    </script>
</head>
<body>
<p>p元素</p>
<button id="hide">删除</button>
<button id="show">显示</button>
<button id="btn3">隐藏/显示</button>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hide demo</title>
    <style>
        div {
            background: #ece023;
            width: 30px;
            height: 40px;
            margin: 2px;
            float: left;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div></div>

<script>
    for ( var i = 0; i < 5; i++ ) {
        $( "<div>" ).appendTo( document.body );
    }
    $( "div" ).click(function() {
        $( this ).hide( 2000, function() {
            $( this ).remove();/*这条语句是在动画执行完成之后再执行的，
                                否则在外面就是意思就是直接删除，就会看不到动画效果了*/
        });
    });
</script>

</body>
</html>

2、淡入淡出

fadeIn()

fadeOut()

fadeTo()

fadeToggle()

3、滑动

slideDown()

slideToggle()

slideUp()

4、回调

回调函数，看jquery官方文档介绍是在动画执行完成之后执行该回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#button").click(function () {
                /*p元素先改变css样式，然后再向上滑动1秒，再向下滑动1秒*/
                $("p").css("color", "red").slideUp(1000).slideDown(1000);
            });
        });
    </script>
</head>
<body>
<p>这里是p元素</p>
<button id="button">点击按钮</button>
</body>
</html>