锋利的jQuery读书笔记---jQuery中动画

jQuery中的动画：

1.show和hide

2.fadeIn和fadeOut

3.slideUp和slideDown

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>

    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

    <title>jQuery中的动画</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body { font-size: 13px; line-height: 130%; padding: 60px }

        #panel { width: 300px; border: 1px solid #0050D0 }

        .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }

        .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }

    </style>

</head>

<body>

<div id="panel">

    <h5 class="head">什么是jQuery?</h5>

    <div class="content">

        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

    </div>

</div>

</body>

<script type="text/javascript">

    /**

     * 1. show()和hide()

     *      show()和hide()方法是jQuery中最基本的动画方法。在HTML中，为一个元素调用hide()方法，会将元素的display样式改为"none"

     * */

//    $(function () {

//        $("#panel h5.head").toggle(function () {

//            $(this).next().hide("slow");

//        }, function () {

//            $(this).next().show("slow");

//        })

//    })

    /**

     * 2. fadeIn()和fadeOut()

     *      fadeIn()和fadeOut()方法只改变元素的不透明度。

     *      fadeOut()方法会在指定的一段时间内降低元素的不透明度，直至元素完全消失("display:none")。

     *      fadeIn()方法则相反

     * */

//    $(function () {

//        $("#panel h5.head").toggle(function () {

//            $(this).next().fadeOut("slow");

//        }, function () {

//            $(this).next().fadeIn("slow");

//        })

//    })

    /**

     * 3. slideUp()和slideDown()

     *      slideUp()和slideDown()方法只会改变元素的高度。

     *      如果一个元素的display属性为"none",当调用slideDown()方法时，这个元素将由上至下延伸展示。

     *      slideUp()方法正好相反，元素将由下至上缩短隐藏。

     * */

    $(function () {

        $("#panel h5.head").toggle(function () {

            $(this).next().slideUp("slow");

        }, function () {

            $(this).next().slideDown("slow");

        })

    })

</script>

</html>

4.自定义动画

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>

    <title></title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body { padding: 60px }

        #panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}

    </style>

</head>

<body>

<div id="panel"></div>

</body>

<script type="text/javascript">

    /**

     * 4. 自定义动画--animate()

     *      语法结构为: animate(param, speed, callback)

     *          param:一个包含样式属性及值的映射，比如{property1:"value1", property2:"value2"...}

     *          speed:速度参数，可选

     *          callback:在动画完成时执行的函数，可选

     * */

    /**

     * 4.1 自定义简单动画

     * */

//    $(function () {

//        $("#panel").click(function () {

//            $(this).animate({left: "500px", top: "500px"}, 3000);//向右向下各移动500px

//        });

//    })

    /**

     * 4.2 累加、累减动画

     * */

//    $(function () {

//        $("#panel").click(function () {

//            $(this).animate({left: "+=500px"}, 3000);//从当前位置右移500px

//        })

//    })

    /**

     * 4.3 多重动画

     *

     * 4.3.1 同时执行多个动画

     * */

//    $(function () {

//        $("#panel").click(function () {

//            $(this).animate({left: "500px", height: "200px"}, 3000);

//        });

//    })

    /**

     * 4.3.2 按顺序执行多个代码

     * */

//    $(function () {

//        $("#panel").click(function () {

//            $(this).animate({left: "500px"}, 3000);

//            $(this).animate({height: "200px"}, 3000);

//        });

//    })

    /**

     * 4.4 综合动画

     * */

//    $(function () {

//        $("#panel").css("opacity", "0.5");

//        $("#panel").click(function () {

//            $(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)

//                    .animate({top:"200px", width:"200px"}, 3000)

//                    .fadeOut("slow");

//        });

//    })

    /**

     * 4.5 动画回调函数

     *

     *      在动画链式调用中，css的方法并不能按照调用链执行，如果需要执行css()方法，只需要使用到回调函数

     * */

//    $(function () {

//        $("#panel").css("opacity", "0.5");

//        $("#panel").click(function () {

//            $(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)

//                    .animate({top:"200px", width:"200px"}, 3000, function () {

//                        $(this).css("border", "5px solid blue");

//                    })

//        });

//    })

    /**

     * 4.6 停止动画和判断是否处于动画状态

     * */

    /**

     * 4.6.1 停止元素的动画---stop()

     *      语法结构：stop([clearQueue], [gotoEnd]);

     *          参数clearQueue和gotoEnd都是可选的参数，为Boolean值(true或false)

     *          clearQueue代表是否要清空未执行完的动画队列

     *          gotoEnd代表是否直接将正在执行的动画跳转到末状态

     *

     *

     *  如果直接调用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画

     *

     *  下面的实例可以防止光标快速移动时造成的动画效果与光标动作不一致，去掉stop后，如果快速移动光标，则会发生动画效果和光标动作不一致

     * */

//    $(function () {

//        $("#panel").hover(function () {

//            $(this).stop()

//                    .animate({height: "150", width: "300"}, 200);

//        }, function () {

//            $(this).stop()

//                    .animate({height: "22", width: "60"}, 300);

//        })

//    })

    //组合动画

//    $(function () {

//        $("#panel").hover(function () {

//            $(this).stop(true)

//                    .animate({height: "150"}, 200)    //如果在此时出发了光标移出的事件

//                                                                    //直接跳过后面的动画

//                    .animate({width: "300"});

//        }, function () {

//            $(this).stop(true)

//                    .animate({height: "22"}, 300)

//                    .animate({width: "60"}, 300);

//        })

//    })

    /**

     * 第二个参数(gotoEnd)可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。

     *

     * 注意：jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。

     * */

    /**

     * 4.6.2 判断元素是否处于动画状态

     *      在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致

     * */

//    if(!$(element).is(":animate")){

//        //如果当前没有进行动画，则添加新的动画

//    }

    /**

     * 4.6.3 延迟动画

     *      在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay()方法。

     * */

//    $(function () {

//        $("#panel").click(function () {

//            $(this).animate({left: "400px", height: "200px", opacity: "1"}, 3000)

//                    .delay(1000)

//                    .animate({top: "200px", width: "200px"}, 3000)

//                    .delay(2000)

//                    .fadeOut("slow");

//        })

//    })

    /**

     * 4.7 其他动画方法

     *      除了上面提到的动画方法，jQuery中还有4个专门用于交互的动画方法

     *      toggle(speed, [callback])-------在1.9中移除

     *      slideToggle(speed, [easing], [callback])

     *      fadeTo(speed, opacity, [callback])

     *      fadeToggle(speed, [easing], [callback])

     * */

    /**

     * 4.7.1 toggle()--可以切换元素的可见状态

     * */

    /**

     * 4.7.2 slideToggle()--通过高度变化来切换匹配元素的可见性，这个动画的效果只调整元素的高度

     * */

//    $(function () {

//        $("#panel").click(function () {

//            $(this).slideToggle();

//        });

//    })

    /**

     * 4.7.3 fadeTo()--可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度

     * */

//    $(function () {

//        $("#panel").click(function () {

//            $(this).fadeTo(600, 0.2);

//        });

//    })

    /**

     * 4.7.4 fadeToggle()--通过不透明度变化来切换匹配元素的可见性。这个动画只调整元素的不透明度

     * */

//    $(function () {

//        $("#panel").click(function () {

//            $(this).fadeToggle();

//        });

//    })

</script>

</html>

最后，动画方法的总结

方法名	说明
hide()和show()	同时修改多个样式属性，即高度、宽度和不透明度
fadeIn()和fadeOut()	只改变不透明度
slideUp和slideDown()	只改变高度
fadeTo()	只改变不透明度
toggle()	用来代替hide()和show()方法，所以会同时修改多个样式，即高度、宽度和不透明度
slideToggle()	用来代替slideUp和slideDown()方法，所以只能改变高度
fadeToggle()	用来代替fadeIn()和fadeOut()方法，所以只能改变不透明度
animate()	属于自定义的方法，以上各种动画方法实质内部都调用了animate()方法。此外，直接使用animate()方法还能自定义其他的样式属性，例如："left","marginLeft","scrollTop"等

动画队列

一组元素上的动画效果
- 当在一个animate()方法中应用多个属性时，动画是同时发生的
- 当以链式的写法应用动画方法时，动画是按照顺序发生的(除非queue选项值为false)
多组元素上的动画效果
- 默认情况下，动画都是同时发生的
- 当以回调的形式应用动画方式时(包括动画的回调函数和queue方法的回调函数)，动画是按照回调顺序发生的

锋利的jQuery读书笔记---jQuery中动画的更多相关文章

锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点查找元素节点查找属性节点创建节点创建元素节点创 ...
锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
《Android源代码设计模式解析》读书笔记——Android中你应该知道的设计模式
断断续续的,<Android源代码设计模式解析>也看了一遍.书中提到了非常多的设计模式.可是有部分在开发中见到的几率非常小,所以掌握不了也没有太大影响. 我认为这本书的最大价值有两点,一个 ...
jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
《编写可维护的javascript》读书笔记（中）——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...

随机推荐

uva 11609
可以想到答案为 1*C(1,n)+2*C(2,n)+3*C(3,n)+....+n*C(n,n); 由公式 k*C(k,n) = n*C(k-1,n-1) 所以最终答案 n*2^(n-1) 用到快速 ...
Mac和iOS开发资源汇总
小引本文主要汇集一些苹果开发的资源,会经常更新,建议大家把这篇文章单独收藏(在浏览器中按command+D). 今天(2013年7月19日)收录了许多中文网站和博客.大家一定要去感受一下哦. 如果大 ...
【unity3d游戏开发之基础篇】unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子
原地址:http://www.cnblogs.com/xuling/archive/2013/03/04/2943154.html 最近开始研究U3D,它的强大就不多说了, 今天研究了研究射线相关东西 ...
POJ 3440 Coin Toss（求概率）
题目链接题意 :把硬币往棋盘上扔,分别求出硬币占1,2,3,4个格子的时候的概率. 思路 : 求出公式输出,不过要注意输出格式,我还因为输入的时候用了int类型错了好几次..... #include ...
Android中XML格式数据的简单使用
源码: package com.wangzhu.demo; import java.io.IOException; import java.io.StringWriter; import javax. ...
fhq_treap 总结
今天跟着zcg大神学了一发fhq_treap 发现在维护区间问题上fhq_treap不仅思维量小,而且代码量更小是Splay的不错的替代品,不过至今还是有一些问题不能很好的解决譬如查询某个数在序列 ...
*[topcoder]LongWordsDiv2
http://community.topcoder.com/stat?c=problem_statement&pm=13147 此题关键在于发现ABAB的组合最多有26*26种,可以穷举,然后 ...
*[codility]MinAvgTwoSlice
https://codility.com/demo/take-sample-test/min_avg_two_slice 此题要求一个数组子段的最小的平均数(返回第一个数字的index).刚开始想记录 ...
腾讯QQ的开发分客户端软件和服务器端软件
Windows客户端主要是C++ COM/ATL Q+Web 后端C++ CGI ,前端javascript和flash 望采纳腾讯QQ使用何种开发平台? 腾讯QQ的开发分客户端软件和服务器端软件两 ...
在C#中怎么调用Resources文件中的图片
譬如资源中有名为myPic的图片,在代码中可以这么使用: this.BackgroundImage = Properties.Resources.myPic; 如有疑问,继续追问.

锋利的jQuery读书笔记---jQuery中动画

锋利的jQuery读书笔记---jQuery中动画的更多相关文章

随机推荐

热门专题