jQuery的动画与特效

Posted Akeke

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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])  :图片高的时候关闭，图片关闭的时候，显示（以滑动的形式显隐）

淡入淡出

  • fadeLn() 和 fadeOut() 方法

　　　　fadeLn(speed,[callback])      fadeOut(speed,[callback])

　　　　与show() 和 hide() 方法相比较 fadeIn() 和 fadeOut() 方法相比较，相同之处都是切换元素的显示状态，不同之处在于。前者的动画效果使用元素的width和height属性都会发生改变，而后者只是改变元素的透明度，并不修改其他属性。

  • fadeTo() 方法

　　　　此方法是用来改变图片的透明度的；

　　　　fadeTo(speed,value)     speed:改变速度    value:透明度值（取值范围一般0-1）

<!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.js"></script>
    <script src="../Content/Scripts/jquery-3.1.1.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <style type="text/css">
        div {
            margin:10px
        }
        img {
            margin:10px
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("select").change(function () {
                var text = $("select option:selected").text();
                $("img").fadeTo(1000,text);
            })
        })
    </script>
</head>
<body class="container">
    <div class="col-lg-12">
        <div class="col-lg-5 col-lg-offset-3">
            <select class="list-group-item col-lg-3 col-lg-offset-4">
                <option selected="selected">1.0</option>
                <option>0.8</option>
                <option>0.6</option>
                <option>0.4</option>
                <option>0.2</option>
            </select>
            <img  class="col-lg-12 img-thumbnail" src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" />
        </div>
    </div>
</body>
</html>
练习：

 自定义动画

  • 简单的动画

　　　　animate()  方法给开发者自定义各种复杂、高级动画提供了极大的方便和空间。调用方法：

　　　　animate(params,[duration],[easing],[callback])

　　　　params:表示用于制作动画效果的属性样式和值得集合。

　　　　[duration]:表示三种默认的速度字符“slow”、“normal”、“fast”或自定义的数字。

　　　　[easing]:为动画插件使用，用于控制动画的表现效果，通常有“linear” 和 “swing”字符值

　　　　[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/jquery-3.1.1.js"></script>
    <style type="text/css">
        img {
            width:200px;
            height:150px;
        }
        div {
            margin-left:30%;
            margin-top:20%;
        }
    </style>
    <script>
        $(function () {
            $("img").click(function () {
                $(this).animate({
                    width:"400px",
                    height:"300px"
                }, 1000, function () {
                    $(this).css("border", "3px solid #666");
                })
            })
        })
    </script>
</head>
<body>
    <div>
        <img src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" />
    </div>
</body>
</html>
练习：
  •  队列中的动画

　　　　所谓队列中的动画，是指一个元素执行了一个以上的多个动画效果，即有多个animate()方法在元素中执行，因此，根据这些animate()方法执行的先后顺序，形成了动画的“队列”，产生“队列后，动画的效果便按照“队列”顺序进行展示。

  • 动画的停止和延时

　　　　stop([clearQueue],[gotoEnd])               ：停止某个方法

　　　　clearQueue:一个布尔值，可以为一个函数返回值，什么时候停止。

　　　　gotoEnd:也是一个布尔值，同样可以为函数返回值，什么时候开始。

　　　　delay(duration,[queueName])               ：延时某个动画的执行

　　　　duration：时间值

　　　　[queueName]:表示队列名词

以上是关于jQuery的动画与特效的主要内容，如果未能解决你的问题，请参考以下文章

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

在jquery中切换动画

Android 动画嵌套片段

jQuery的动画与特效

JQuery特效与动画总结