动画：

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. 服务端性能测试工具校验v1.1

    服务端性能测试工具校验v1.1 更新说明: 1.精简CRT运行库支持. 2.添加响应模拟测试,校验压力测试工具的响应时间统计准确性. 3.大并发请求请降低延迟时间 WEIMJSAM原创,转载请注明出处 ...

  2. SonarQube的使用入门

    SonarQube的安装.配置与使用 详情请参照原博客:http://www.cnblogs.com/qiaoyeye/p/5249786.html SonarQube是管理代码质量一个开放平台,可以 ...

  3. wkhtmltopdf乱码解决方案

    在CentOS下使用wkhtmltopdf将html页面转换成pdf的时候对于某些页面可能会出现转换成的pdf中很多字符乱码的情况,更怪异的是直接在命令行下运行一切正常,但在httpd+php下使用却 ...

  4. ios启动载入启动图片

    版本判断: 1.首先你要知道这个键值对的key:id key =   (id)kCFBundleVersionKey; 2.同过本地的NSBundle取得当前的版本号. 3.在沙盒中取得对应的版本号. ...

  5. java 实现WebService 以及不同的调用方式

    webservice:    就是应用程序之间跨语言的调用    wwww.webxml.com.cn    1.xml    2.    wsdl: webservice description l ...

  6. day10-rabbitmq

    安装python rabbitMQ module pip instal pika 发布者: #!/usr/bin/env python #coding:utf8 import pika connect ...

  7. ipad2 恢复

    1.用原装充电线连接电脑,并打开itunes~2.同时按住电源键和home键 10秒左右,直到白苹果画面变成黑屏3.按住home键~但要松开电源键,继续等待~直到ipad出现画面(如图) 4.这时候, ...

  8. RDD常用方法之subtract&intersection&cartesian

    subtract Return an RDD with the elements from `this` that are not in `other` .     def subtract(othe ...

  9. Magic xpa 2.5发布 Magic xpa 2.5 Release Notes

    Magic xpa 2.5發佈 Magic xpa 2.5 Release Notes Magic xpa 2.5 Release NotesNew Features, Feature Enhance ...

  10. asp.net 一次性提交大量数据,服务器会报错,要在 web.config 中设置一下

    web.config <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NET 应 ...