动画：

1、show(),hide()

2、.stop() .slideDown();  向下。 .stop().slideUp();  向上 （可以做下拉）        .stop() 执行之前加 停止

<script type="text/javascript">
$("#div1").hover(function () {/*复合事件 移入移出*/
$("#div2").stop() .slideDown();
}, function () {
$("#div2").stop().slideUp();
});
</script>

3、.fadeIn();    .fadeOut();  淡入淡出效果

4、自定义动画：

animate（{left:"300px",top:"300px"....},1000,function(){回调函数}）;   1000指的是 时间（秒）

停止动画，防止动画积累， .stop(true)  不加true也可

<script type="text/javascript">
$("#div2").click(function () {
$(this).animate({ left: "600px", top: "300px" }, 1000, function () {
$(this).css("background-color","red"); 移动指定位置变成红色
});
});
</script>

实例：下拉菜单

<style type="text/css">

        .div {

        position:relative;

        width:120px;

        height:60px;

        overflow:hidden;/*超出部分隐藏*/

        float:left;

        margin-left:10px;

        }

        .div1 {

        position:relative;

        width:120px;

        height:60px;

        background-color:red;

        }

        .div2 {

        position:relative;

        width:120px;

        height:400px;

        background-color:green;

       /*display:none;隐藏*/

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <div class="div">

           <div class="div1">   </div>

           <div class="div2"></div>

        </div>

        <div class="div">

           <div class="div1">   </div>

           <div class="div2"></div>

        </div>

        <div class="div">

           <div class="div1">   </div>

           <div class="div2"></div>

        </div>

    </form>

</body>

</html>

<script type="text/javascript">

    $(".div").hover(function () {

        $(this).stop().animate({height:"460px"},);

    }, function () {

        $(this).stop().animate({ height:"60px"}, );

    });

</script>

大图滚动：

<style type="text/css">

        .div1 {

        position:relative;

        width:400px;

        height:400px;

        left:100px;

        background-color:red;

        overflow:hidden;

        }

        #datu {

        position:relative;

        width:1600px;

        height:%;

        }

            #datu img {

            position:relative;

            float:left;

          width:400px;

          height:400px;

            }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div class="div1">

        <div id="datu">

            <img src="Images/dota_chenmo1.jpg" />

            <img src="Images/dota_img3.jpg" />

            <img src="Images/dota_img4.jpg" />

            <img src="Images/dota_img5.jpg" />

        </div>

    </div>

    </form>

</body>

</html>

<script type="text/javascript">

    var count = ;/*定义一个数为0，每点击一下就是下一张图*/

      var time1=  window.setInterval(function () {/*自动换图，每隔两秒*/

            count++;/*加1，加1...*/

            if (count >= )/*判断到了第四张再从第一张走*/ {

                count = ;

            }

            var pxx = count * -;/*定义一个数，左边多少*/

            $("#datu").animate({ left: pxx }, );

        }, );

      $(".div1").mouseover(function () {

          window.clearInterval(time1);

      });

</script>
<script type="text/javascript">

    var count = ;

    $("#div1").click(function () {

        count++;

        $("#datu").animate({ left: count * - }, , function () {

            if (count >= ) {

                count = ;

                $("#datu").css("left","");

            }

        });

    });

</script>

移入图片变大：

<style type="text/css">

        #div1 {

        width:100px;

        height:100px;

        background-color:red;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div id="div1"></div>

    </form>

</body>

</html>

<script type="text/javascript">

    $("#div1").hover(function () {//鼠标移入图变大并且渐变色，先引入Color包引入，必须放到下面

        $(this).animate({width:"",height:"",backgroundColor:"green"},);

    }, function () {

        $(this).animate({ width: "", height: "", backgroundColor: "red" }, );

    });

</script>

Jquery--动画的更多相关文章

  1. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  2. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  3. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  4. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  5. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  6. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  7. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  8. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  9. Velocity – 另外一款加速的 jQuery 动画插件

    Velocity 是一款 jQuery 插件,重新实现了 $.animate() 方法,提供更高的性能(比 CSS 动画还更快),同时包括一些新的功能,以改进动画工作流程.Velocity 除了包括所 ...

  10. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

随机推荐

  1. [zz]利用碎片时间健身

    利用碎片时间健身(上) http://v.163.com/zixun/V96957QH6/VBSQ4D861.html#from=zixunplay_recommended 利用碎片时间健身(下) h ...

  2. 虚拟现实外包公司— VR开发编辑器意义重大 印证VR不仅服务于用户

    三大引擎制造商 Unity Technologies .Epic Games 和Crytek 讨论在自家产品中添加附件,方便开发商在虚拟现实中创作游戏.这会对许多人造成影响,特别是早已进入虚拟现实的先 ...

  3. JSP的基本语法：

    JSP文件有5类元素:注释,模版,脚本,指令,行为 下面我就和大家分别唠唠,这5个玩意到底是啥玩意! 一.注释(我feel有三种): html注释:<!--……-->  显式注释,即客户端 ...

  4. Oracle 11g服务器安装详细步骤

    原出处:http://jingyan.baidu.com/article/363872eccfb9266e4aa16f5d.html 方法/步骤   1 大家可以根据自己的操作系统是多少位(32位或6 ...

  5. Elasticsearch初探

     elasticsearch中的概念同传统数据库的类比如下: Relational DB -> Databases -> Tables -> Rows -> ColumnsEl ...

  6. Microsoft Capicom 2.1 On 64bit OS

    第一步下载capicom.dll http://files.cnblogs.com/files/chen110xi/DLL.7z 第二步注册capicom.dll至SysWow64 第三步VS中设置 ...

  7. 使用Struts2搭建登录注册示例

    使用Struts2来搭建mvc网站框架还是比较容易的,Struts2提供了各项辅助功能,保证了web开发的快速方便.下面使用struts2来搭建一个登录注册示例. 0 项目结构截图 1 搭建Strut ...

  8. 2.4 ARM寻址方式

    所谓的寻址方式就是处理器指令中给出的信息来找到指令所需要的操作数的方式 1. 立即数寻址 立即数寻址,是一种特殊的寻址方式,操作数本身就在指令中给出,只要取出指令也就取到了操作数,这个操作数被称为立即 ...

  9. 安装Office 2010后出现正在配置

    OFFICE 2010 MSDN版出来后,下载安装 ,启动后发现每次打开都会出现“正在配置”的进度,删除重装亦不成功,对SETUP.EXE改名也不行,最后找到这个方法,成功,备忘: 运行以下内容: r ...

  10. socket 网络编程

    1. 基础socket库 socket.h: /** * 网络套接字库 */ #ifndef Socket_h #define Socket_h #include <stdio.h> #i ...