jQuery 动画效果

三类九种以及自定义动画效果
jQuery animate() 方法用于创建自定义动画。

语法：

<pre style="margin-top:10px;margin-bottom:0px;padding:10px;border:1px dotted rgb(119,136,85);font-family:Consolas, 'Courier New', Courier, monospace;background:rgb(245,245,245);">$(selector).animate({params},speed,callback);</pre>

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

提示：可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

jquery的animate方法可以自定义动画，但是，只能针对数字类型的属性，如大小，高度，透明度等。

对于非数字类型如颜色，则不支持动画。所以，需要自行处理。

jqueryui 中增加个这个支持，可以供我们使用。

如果，只是需要颜色动画，可以不必要加载所有的jqueryui 文件。只需要它的一部分。

有高人将其独立出来了。

jquery.colorAnimations.js

    $(function() {
                /**
                 * jQuery 为大家提供三类九种动画效果
                 *  
                 * 自定义动画
                 */
            });
            
            function closed() {
                // 动画的参数分为两种类型
                // 字符串  slow normal fast
                // 数字 表示动画执行时间，单位是毫秒
//              $("#box").hide(1000);
                
                /**
                 * 渐变 透明度
                 */
//              $("#box").fadeOut(2000);

                /**
                 * 卷帘效果
                 */
                $("#box").slideUp(5000);
                
            }
            
            function show() {
//              $("#box").show(2000);
                
//              $("#box").fadeIn(2000);

                $("#box").slideDown(5000);

            }
            
            function toggle() {
//              $("#box").toggle(2000); //开关 触发器 有时关闭，没有时出现
                
//              $("#box").fadeToggle(2000);

                $("#box").slideToggle(5000)

            }
            
            function run() {
                $("#box2").animate({
                    "left": "200px",
                    "top" : "300px",
                    "heigth": "300px"
//                  "width": "80%"
                },5000,"swing",function() {
                    $("#box2").animate({
                        "left": "30px",
                        "top" : "30px",
                        "heigth": "200px",
                        "width": "500px"
                    },2000);
                });
            }
            
            $(function() {
                $("img").mouseenter(function() {
                    $(this).animate({
                        "top": "250px",
                        "height": "0px",
                        "opcity": "0"
                    },2000,function() {
                        $(this).attr("src","img/gb2.png");
                        $(this).animate({
                            "top": "50px",
                            "height": "500px",
                            "opcity": "1"
                        },2000)
                    });
                    
                    
                })
                
                
                
            });