首页 > 代码库 > jQuery的动画与特效

jQuery的动画与特效

显示与隐藏

  • show() 和 hide() 方法
  • 动画效果的show() 和 hide()

    show(speed,[]callback)  

    hide(speed,[]callback)

      speed:表示执行动画时的速度       [callback]:表示动画完成时的回调函数

  • toggle() 方法

    该方法就是用来切换元素的可见状态,如果是显示状态,则变成隐藏状态;如果是隐藏状态,则变成显示状态。

    形式一:

    toggle()      

      无参数调用

    形式二:

    toggle(switch)

      switch为一个布尔值,即 true 或者 false 。当该值为 true 时显示元素;否则。隐藏。

    形式三:

    toggle(speed,[callback])

      speed为速度。callback为回调函数。

    

技术分享
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Content/Scripts/bootstrap.min.js"></script>
    <script src="../Content/Scripts/jquery-3.1.1.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        input {
            margin:8px
        }
        div{
            margin-left:300px
        }
        .clsImg {
            border:1px solid #ff0000
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("input").each(function (index) {
                $(this).click(function () {
                    //无参数
                    if (0 == index) {
                        $("div img").toggle();
                    }
                    //逻辑显示
                    if (1==index) {
                        $("div img").toggle(0 == index);
                    }
                    //动画显示
                    if (2==index) {
                        $("div img").toggle(300, function () {
                            $("div img").addClass("clsImg");
                        });
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div style="width:120px">
        <div class="divMenu">
            <input id="Button1" type="button" value="无参数" class="btn-primary"/>
            <input id="Button2" type="button" value="逻辑显示" class="btn-primary" />
            <input id="Button3" type="button" value="动画显示" class="btn-primary" />
        </div>
        <div>
            <img src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" style="width:300px;height:200px"/>
        </div>
    </div>
</body>
</html>
练习:

滑动

  • slideDown() 与 slideUp()方法

    slideDown(speed,[callback])   :图片宽度向下滑动,即显示图片

    slideUp(speed,[callback])   :图片宽度向上滑动,即关闭图片

技术分享
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Content/Scripts/bootstrap.min.js"></script>
    <script src="../Content/Scripts/jquery-3.1.1.min.js"></script>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        img {
            width:400px;height:300px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var flag = false;
            var $title = $("#title");
            var $tip = $("#divTip");
            $title.click(function () {
                if (!flag) {
                    $("img").slideUp(1000, function () {
                        $tip.html("关闭成功!");
                    })
                    $(this).html("显示图片");
                    flag = true;
                }
                else {
                    $tip.html("");
                    $("img").slideDown(1000);
                    $(this).html("隐藏图片");
                    flag = false;
                }
            })
        })
    </script>
</head>
<body>
    <div class="container">
        <div id="title" class="panel-title">隐藏图片</div>
        <div class="panel-body">
            <img src="../Image/5670d8646a4b6.jpg"  alt="Alternate Text" />
            <div id="divTip"></div>
        </div>
    </div>
</body>
</html>
练习:
  • slideToggle()方法 

    slideToggle(speed,[callback])  :图片高的时候关闭,图片关闭的时候,显示(以滑动的形式显隐)

jQuery的动画与特效