显示与隐藏

  • 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的动画与特效的更多相关文章

  1. JQuery之动画与特效

    显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow.normal.fast,对应的速度分别为600ms.400ms.200 ...

  2. jQuery+CSS3动画相册特效

    在线演示 本地下载

  3. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  5. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  6. jQuery动画与特效

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  7. 4款基于jquery的列表图标动画切换特效

    网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览   源码下载 实现的代码 ...

  8. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  9. 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单

    新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...

随机推荐

  1. Go 入门 - 方法和接口

    方法和接口 方法的接受者 Go中没有类,取而代之的是在结构体上定义的方法 为了将方法(函数)绑定在某一类结构体上,我们在定义函数(方法)时引入"接受者"的概念. 方法接受者在它自己 ...

  2. R语言爬虫：CSS方法与XPath方法对比（代码实现）

    CSS选择器和XPath方法都是用来定位DOM树的标签,只不过两者的定位表示形式上存在一些差别: CSS 方法提取节点 library("rvest") single_table_ ...

  3. Address already in use: JVM_Bind，tomcat启动异常

    严重: StandardServer.await: create[8050]: java.net.BindException: Address already in use: JVM_Bind tom ...

  4. POJ2505 A multiplication game(博弈)

    题意 开始时$p = 1$,每次可以乘$2 - 9$,第一个使得$p \geqslant n$的人赢 问先手是否必胜 $1 <n <4294967295$ Sol 认真的推理一波. 若当前 ...

  5. ORB-SLAM（十）LoopClosing

    构造函数 LoopClosing(Map* pMap, KeyFrameDatabase* pDB, ORBVocabulary* pVoc,const bool bFixScale); 主要分两部分 ...

  6. Windows系统常用修复命令 无须重装系统

    1.0 netsh int ipv4 reset 2.0 netsh winsock reset winsock是Windows网络编程接口,winsock工作在应用层,它提供与底层传输协议无关的高层 ...

  7. APP产品设计流程图

    产品设计流程(toB) 工作有半个月了,遇到了很多问题,也在不断学习和充实自己,让自己的工作变得更加清晰和流程化,所以整理了这么个设计流程. 收集整理一切有用或则以后可能会用的文档. 从文档里面提炼用 ...

  8. JMeter随机上传附件

    方法一: 1.添加一个前置Beanshell 2.输入代码: File folder = new File("/path/to/your/folder/with/audiofiles&quo ...

  9. Python 函数参数类型大全（非常全！！！）

    Python 函数参数类型大全(非常全!!!) 1.在python编写程序里面具有函数文档,它的主要作用是为了让别人可以更好的理解你的函数,所以这是一个好习惯,访问函数文档的方式是: MyFuncti ...

  10. TW实习日记：第27天

    今天依旧是磨洋工的一天,说真的,被存在各种问题的后端接口把耐心和动力都给磨没了.于是一天就又在沟通接口问题中度过了,完善了一个新功能,将一个新功能开发到了一半.效率可真是够低的,唉.然后不知道为什么突 ...