动画：

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. sql server2008 检查是否需要挂起计算机重新启动。挂起重新启动会导致安装程序失败。

    解决方法: 1.如果重新启动后,一样无效, 2.那么就进入注册表编辑器,通过修改注册表的方法来解决.除了删除SQL安装时遗留下的LJ文件,还必须进行以下操作: 在"开始"-&quo ...

  2. Android学习笔记——权限解释

    <!--允许读取电话状态SIM的权限--><uses-permission android:name="android.permission.READ_PHONE_STAT ...

  3. c#操作Excel

    Excel是微软公司办公自动化套件中的一个软件,他主要是用来处理电子表格.Excel以其功能强大,界面友好等受到了许多用户的欢迎.在设计应用系统时,对于不同的用户,他们对于打印的需求是不一样的,如果要 ...

  4. C#动手实践：Kinect V2 开发（1）：初步了解及环境搭建

    该分享使用的是Kinect 二代,C#做为编程语言,请知悉 Kinect是微软在2009年6月2日的E3游戏展上,正式公布的XBOX360体感周边外设.它是一种3D体感摄影机,同时它导入了即时动态捕捉 ...

  5. Hbase数据导入导出

    平时用于从生产环境hbase到导出数据到测试环境. 导入数据: import java.io.BufferedReader; import java.io.File; import java.io.F ...

  6. [Linux] IP绑定解释 BindIp

    一.缘由: 今天安装Mongodb,本来想限制只能内网或者某几台机器可以访问,看到配置文件有个net.bindIp选项, 就自以为是的认为,他可以像nginx那样限制访问来源IP,其实大错特错.这里配 ...

  7. oracle and 和 or

    源地址:https://zhidao.baidu.com/question/350891282.html (FirstName='Thomas' OR FirstName='William') AND ...

  8. 【OpenCV练习】图片腐蚀

    在简单显示出图片之后,这次尝试一下将图片进行腐蚀操作,代码如下. #include <iostream> #include <opencv2/highgui/highgui.hpp& ...

  9. linux命令-find {查找}

    一  命令解释 常用示例 :find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; path: find命令所 ...

  10. 【转】Hibernate级联注解CascadeType参数详解

    cascade(级联) 级联在编写触发器时经常用到,触发器的作用是当 主控表信息改变时,用来保证其关联表中数据同步更新.若对触发器来修改或删除关联表相记录,必须要删除对应的关联表信息,否则,会存有脏数 ...