Hybrid App开发之jQuery动画与特效

前言：

 今天来学习一下JQuery的动画特效。

大致分以下几种动画

  • show() hide()显示与隐藏动画
  • fadeIn() fadeOut()淡入淡出动画
  • slideDown() slideUp() 全窗帘动画
  • fadeTo() 指定透明度渐进式动画
  • toggle() 同show() hide()
  • slideToggle() 同slideDown() slideUp()
  • animate()自定义动画

首先先看下元素的隐藏与显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery动画与特效</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#changeBtn").click(function () {
                if ($("div > p").css("display") == "none") {
                    $("div > p").css("display", "block");
                } else {
                    $("div > p").css("display", "none");
                }
            });
        });
    </script>
</head>
<body>

<div>
    <p>
        通过事件来控制这段文字的显示与隐藏。
    </p>
    <input type="button" name="button" value="点击" id="changeBtn">
</div>
</body>
</html>

我们通过hide与show函数看下效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery动画与特效</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#changeBtn").click(function () {
                if ($("div > p").is(':visible')) {
                    $("div > p").hide(300, function () {
                        $("#changeBtn").val("显示");
                    });
                } else {
                    $("div > p").show(300, function () {
                        $("#changeBtn").val("隐藏");
                    });
                }
            });
        });
    </script>
</head>
<body>

<div>
    <p>
        通过事件来控制这段文字的显示与隐藏。
    </p>
    <input type="button" name="button" value="隐藏" id="changeBtn">
</div>
</body>
</html>

 使用toggle函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery动画与特效</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#changeBtn").click(function () {
                var $p = $("div > p");
                //无参数调用方式
                $p.toggle();
                //逻辑参数调用方式
                $p.toggle(!$p.is(':visible'));
                //动画效果调用方式
                $p.toggle(500,function () {

                });
            });
        });
    </script>
</head>
<body>

<div>
    <p>
        通过事件来控制这段文字的显示与隐藏。
    </p>
    <input type="button" name="button" value="隐藏" id="changeBtn">
</div>
</body>
</html>

slideDown(),slideUp()函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery动画与特效</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        div {
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#changeBtn").click(function () {
                var $div = $("#imageDiv");
                if ($div.is(':visible')) {
                    $div.slideUp(300);
                } else {
                    $div.slideDown(300);
                }
            });
        });
    </script>
</head>
<body>

<div>
    <p>
        通过事件来控制这段文字的显示与隐藏。
    </p>
    <input type="button" name="button" value="隐藏" id="changeBtn">
</div>
<div id="imageDiv" hidden>
    <img src="../images/bg_post_activity_3.png">
</div>

</body>
</html>

fadeIn()、fadeOut动画 淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery动画与特效</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        div {
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#changeBtn").click(function () {
                var $div = $("#imageDiv");
                if ($div.is(':visible')) {
                    $div.fadeOut(300);
                } else {
                    $div.fadeIn(300);
                }
            });
        });
    </script>
</head>
<body>

<div>
    <p>
        通过事件来控制这段文字的显示与隐藏。
    </p>
    <input type="button" name="button" value="隐藏" id="changeBtn">
</div>
<div id="imageDiv" hidden>
    <img src="../images/bg_post_activity_3.png">
</div>

</body>
</html>

自定义动画 图片放大效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery动画与特效</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        div {
            margin: 10px;
        }

        #image {
            width: 1500px;
            height: 702px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#changeBtn").click(function () {
                var $div = $("#imageDiv");
                var $image = $("#imageDiv > img");
                $image.animate({
                    width: '1500px',
                    height: '702px',
                    margin:'+=150px'
                }, 1000, function () {
                    $image.animate({
                        width: '750px',
                        height: '351px',
                        margin:'-=150px'
                    }, 1000, function () {
                    });
                });
            });
        });
    </script>
</head>
<body>

<div>
    <p>
        通过事件来控制这段文字的显示与隐藏。
    </p>
    <input type="button" name="button" value="隐藏" id="changeBtn">
</div>
<div id="imageDiv">
    <img src="../images/bg_post_activity_3.png" >
</div>

</body>
</html>

总结：

  最近比较忙，抽空学习一下JQuery的动画使用。

 

posted on 2017-06-22 21:42  总李写代码  阅读(263)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 总李写代码
Powered by .NET 8.0 on Kubernetes