Jquery各种绚丽动画效果基础学习大全 - 18素材网

- [登录]
- [注册]
- 首页
- PNG图标
- 广告创意
- 节日专题
- JS特效
- JS特效大全
- JS代码特效
- 文库分享

- 素材
- 特效
- 文库
- 图标
- 设计
- 代码
- UI
- HTML5
- 动态

您现在的位置： 技术文章
Jquery各种绚丽动画效果基础学习大全
时间：2012-02-12 11:24 来源：18素材 发布人：飞翔 浏览次数：1003
Jquery对于互联网是一种巨大的改善，从传统的用户体验，代码书写，效果实现，等都为大家有了很大的改善，动画效果就是其中一个很明显的例子，很多人希望将网页做的绚丽无比，但繁琐的动画效果成为了那些爱美设计师的头号杀手，那么今天我们将jquery中所提供的动画效果聚集说明，jQuery提供能很多实现页面动画效果的工具函数，使用这些函数，能更好的提高用户体验。

首先，我们来看下，jQuery给我们提供的一些基础的动画函数：

♦ animate( properties, [ duration ], [ easing ], [ callback ] )：执行一个CSS属性设置的自定义动画

properties：一组CSS属性，动画将朝着这组属性移动。

duration：一个字符串或者数字决定动画将运行多久。

easing：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。

callback：在动画完成时执行的函数。

♦ fadeIn( [ duration ], [ callback ] )：通过淡入的方式显示匹配元素。

♦ fadeOut( [ duration ], [ callback ] )：通过淡出的方式显示匹配元素。

♦ slideUp( [ duration ], [ callback ] )：用滑动动画隐藏一个匹配元素。

♦ slideDown( [ duration ], [ callback ] )：用滑动动画显示一个匹配元素。

♦ slideToggle( [ duration ], [ callback ] )：用滑动动画显示或隐藏一个匹配元素。

♦ jQuery.fx.off：当这个属性设置为`true`的时候，调用时所有动画方法将立即设置元素为他们的最终状态，而不是显示效果。这可能令人满意的几个原因：

jQuery是被用在低资源设备。

动画使用户遇到可访问性问题。

动画可以通过设置这个属性为`false`重新打开。

♦ stop( [ clearQueue ], [ jumpToEnd ] )：停止匹配元素当前正在运行的动画。

clearQueue一个布尔值，指示是否取消以列队动画。默认 `false`。

jumpToEnd 一个布尔值指示是否当前动画立即完成。默认`false`.

下面将看到如何通过这些函数在ASP.NET里面实现一些基础的动画效果：

• 实现文字放大的动画效果

页面代码：

     <form id="form1" runat="server">
        <div align="center">
            鼠标移动上去放大字体：
            <fieldset id="content" style="width: 500px; height: 300px;">
                <asp:Label ID="lblContent" CssClass="enlarge" runat="server">世上充满无数的选择和努力，但对于成功，选择大于努力。敏捷开发是一种选择。</asp:Label>
            </fieldset>
        </div>
        </form>

脚本代码：

        <script type="text/javascript">
            $(function () {
                var oldSize = parseInt($(".enlarge").css("fontSize"));
                var newSize = oldSize * 3;
                $("#content").hover(function () {
                    $(".enlarge").css("cursor", "pointer");
                    $(".enlarge").animate({ fontSize: newSize }, 300);
                }, function () {
                    $(".enlarge").animate({ fontSize: oldSize }, 300);
                });
            });
        </script>
        <style type="text/css">
            .enlarge
            {
                font-size: 12.5px;
                font-family: Arial, Sans-Serif;
            }
        </style>

• 实现图片淡入淡出的动画效果

页面代码：

        <form id="form1" runat="server">
        <div align="center">
            <fieldset id="content" style="width: 480px; height: 370px;">
                <asp:Image ID="img1" ImageUrl="~/images/1.jpg" runat="server" />
            </fieldset>
        </div>
        </form>

脚本代码：

        <script type="text/javascript">
            $(function () {
                $("#content").hover(function () {
                    $("#img1").css("cursor", "pointer");
                    $("#img1").fadeOut(1000);
                }, function () {
                    $("#img1").fadeIn(1000);
                });
            });
        </script>
        <style type="text/css">
            #img1
            {
                width: 438px;
                height: 336px;
            }
        </style>

• 实现页面元素上下滑动的动画效果

页面代码：

        <form id="form1" runat="server">
        <div align="center">
            <fieldset style="width: 400px; height: 150px;">
                <asp:Button ID="btnSlide" runat="server" Text="点击上下滑动" />
                <br />
                <br />
                <asp:Panel ID="plSlide" runat="server" CssClass="slide">
                    看我上下滑动了^_^</asp:Panel>
            </fieldset>
        </div>
        </form>

脚本代码：

        <script type="text/javascript">
            $(function () {
                $("#btnSlide").click(function (e) {
                    e.preventDefault();

                    /*if ($("#plSlide").is(":hidden")) {
                    $("#plSlide").slideDown(600);
                    }
                    else {
                    $("#plSlide").slideUp(600);
                    }*/

                    // 更简单的实现方法
                    $("#plSlide").slideToggle(600);
                });
            });
        </script>
        <style type="text/css">
            .slide
            {
                font-size: 12px;
                font-family: Arial, Sans-Serif;
                display: none;
                background-color: #9999FF;
                height: 100px;
            }
        </style>

• 实现如何阻止当前动画队列的动画效果

页面代码：

    <form id="form1" runat="server">
        <div align="center">
            <table border="0" cellpadding="3" cellspacing="3">
                <tr>
                    <td class="menuitem">
                        菜单1
                    </td>
                    <td class="menuitem">
                        菜单2
                    </td>
                    <td class="menuitem">
                        菜单3
                    </td>
                    <td class="menuitem">
                        菜单4
                    </td>
                </tr>
            </table>
        </div>
        </form>

脚本代码：

     <script type="text/javascript">
            $(function () {
                $(".menuitem").hover(function () {
                    $(this).animate({ opacity: 0.5 }, "slow");
                }, function () {
                    // 通过实例可以自己感受下不使用stop()和使用后菜单移动是什么效果
    //$(this).animate({ opacity: 1.0 }, "slow");
    // 通过使用stop()后，不再会有菜单元素动画队列播放的效果
                    $(this).stop().animate({ opacity: 1.0 }, "slow");
                });
            });
        </script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            .menuitem
            {
                background-color: Gray;
                font-weight: bold;
                color: White;
                text-align: center;
                width: 100px;
                height: 50px;
                cursor: pointer;
            }
        </style>

• 实现元素多个样式属改变的动画效果

页面代码：

    <form id="form1" runat="server">
        <div align="center">
            <fieldset style="width: 550px; height: 370px;">
                <asp:Button ID="btnAnimate" runat="server" Text="运行动画" /><br />
                <br />
                <asp:Panel ID="plAnimate" runat="server" CssClass="contentArea">
                    如果真的遇到一个特别大的Story，应该适当的把Story分解。</asp:Panel>
            </fieldset>
        </div>
        </form>

脚本代码：

     <script type="text/javascript">
            $(function () {
                $("#btnAnimate").click(function (e) {
                    e.preventDefault();
                    $("#plAnimate").animate({ width: "500px",
                        height: "280px",
                        opacity: 0.5,
                        fontSize: "36px",
                        borderWidth: "16px"
                    }, "slow");
                });
            });
        </script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            .contentArea
            {
                font-size: 12px;
                font-family: Arial, Sans-Serif;
                width: 200px;
                height: 100px;
                background-color: #9999FF;
                border: solid;
            }
        </style>

• 实现页面元素连续运动的动画效果

页面代码：

     <form id="form1" runat="server">
        <div align="center">
            <fieldset style="width: 550px; height: 250px">
                <asp:Button ID="btnAnimate" runat="server" Text="让下面正方形开始连续运动" />
                <br />
                <br />
                <asp:Panel ID="plAnimate" runat="server" CssClass="contentArea">
                </asp:Panel>
            </fieldset>
        </div>
        </form>

脚本代码：

    <script type="text/javascript">
            $(function () {
                /*按顺序定义元素运动规则：
                1.向右移动200px，物体透明度改变为0.8，运动时间2000ms
                2.向上移动100px, 物体透明度改变为0.5，运动时间1700ms
                3.向左移动400px, 物体透明度改变为0.2，运动时间1200ms
                4.向下移动200px, 物体透明度改变为1，运动时间700ms*/
                $(function () {
                    $("#btnAnimate").click(function (e) {
                        e.preventDefault();
                        // +=和-=这种表达式表示在原来的值上做相应的运算
                        $("#plAnimate").animate({ left: "+=200px", opacity: 0.8 }, 2000)
                        .animate({ top: "-=100px", opacity: 0.5 }, 1700)
                        .animate({ left: "-=400px", opacity: 0.2 }, 1200)
                        .animate({ top: "+=200px", opacity: 1 }, 700);
                    });
                });
            });
        </script>
        <style type="text/css">
            .contentArea
            {
                width: 60px;
                height: 60px;
                border: solid;
                background-color: #CCCCCC;
                position: relative;
            }
        </style>

• 实现一个二级菜单显示的动画效果

页面代码：

     <form id="form1" runat="server">
        <div>
            <div class="menu_head" id="menu1">
                菜单1</div>
            <div class="menu_sub">
                子菜单11<br />
                子菜单12</div>
            <div class="menu_head">
                菜单2</div>
            <div class="menu_sub">
                子菜单21<br />
                子菜单22</div>
            <div class="menu_head">
                菜单3</div>
            <div class="menu_sub">
                子菜单31<br />
                子菜单32</div>
            <div class="menu_head">
                菜单4</div>
            <div class="menu_sub">
                子菜单41<br />
                子菜单42</div>
        </div>
        </form>

脚本代码：

    <script type="text/javascript">
            $(function () {
                $(".menu_head").click(function () {
                    if (parseFloat($(this).css("opacity")) == 1) {
                        $(this).animate({ opacity: 0.5, fontSize: "18px" }, "slow");
                    }
                    else {
                        $(this).animate({ opacity: 1, fontSize: "15px" }, "slow");
                    }
                    $(this).next(".menu_sub").slideToggle("slow");
                });
            });
        </script>
        <style type="text/css">
            .menu_head
            {
                width: 150px;
                height: 30px;
                background-color: #cccccc;
                cursor: pointer;
                font-size: 15px;
            }

            .menu_sub
            {
                width: 150px;
                height: 50px;
                background-color: #9999ff;
                display: none;
            }
        </style>

通过以上示例的学习，在以后通过jQuery操作动画效果的时候，希望对你有一定的帮助。

上一篇： 9件创业教我的事 下一篇： 老站长分析提高网站流量的使用方法
更多文章
全部
程序袁怎样看待开发效率和代码质量
荷兰17岁女黑客尽然用C#编写病毒攻击.NET
为什么Iphone4s不能正常使用facetime
windows 8 最重要的新特性
WP7基本使用小教程
怎样用谷歌Chrome浏览器做手机模拟器
2个月教会女友编程的方法
让表单简化留住潜在顾客的方法
通过shtml实现页面模块化重构
什么是接口 接口有什么作用
分类
全部

- ·站长手册
- ·优化推广
- ·职业生涯
- ·技术文章
- ·HTML5 学习
- ·UI设计欣赏
- ·javascript
- ·业界动态
- ·HTML+CSS
- ·综合信息
- ·幽默搞笑
- ·软硬维护

黄金展位
JS超酷球状变动效果<十>
JS+CSS超酷球形环状菜单导航,球形顺时针转动
超漂亮的仿MAC的CSS菜单3D效果
推荐文章
全部

- ·8个让你更有效率的简单方法
- ·23条设计网页有用技巧
- ·成功SOHO必备12条法则
- ·书法欣赏方法
- ·HTML5 使用技巧大全
- ·过去2011年度中网站访问量流量硬件软件统计使用
- ·如何正确使用友情连接,8个实用的友情链接技巧
- ·HTML5中的视频
- ·CSS浮动属性Float详解
- ·网站常用css缩写代码
- ·什么是 HTML5
- ·亚伦·赖金的18种节约时间方法

JS超酷特效
全部
JS图片展示可移动图片放大效果(放大镜效果)
QQ阿里旺旺隐藏展开在线客服js特效代码
JS代码特效
全部

- ·随浏览器变化的css文本导航菜单
- ·一款简洁的日历代码特效
- ·时间的显示有6种不同的风格
- ·经典实用的时间代码
- ·2008北京奥运会倒计时代码
- ·可关闭移动的图层特效
- ·鼠标放上就可以看出title与alt的特效提示
- ·div中input垂直居中代码（兼容所有浏览器）
- ·纯css鼠标放上去显示隐藏层
- ·防止被他人窃取代码清空源文件
- ·复选框的全选全部不选及反相选择
- ·纯div+css实现的隐藏层不被select遮挡

- 18素材网简介|
- 我们的价值观|
- 版权声明|
- 用户投稿|
- 常见问题|
- 联系我们|
- 18活动|
- 公益活动
- 我要发布
- 订阅文库

Copyright 2007-2013 18SuCai.com All Rights Reserved 版权所有·18素材网 素材资源平台
豫ICP备11008675号 建议使用1024*768以上的屏幕分辨率和6.0以上版本的IE来访问本站
邮箱：sucaiwangzhan@163.com QQ群：180197858 (欢迎大家提出建议意见，和宝贵想法，稿件等)