动画：

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. [综]前景检测GMM

    tornadomeet 前景检测算法_4(opencv自带GMM) http://www.cnblogs.com/tornadomeet/archive/2012/06/02/2531705.html ...

  2. C#实现对Windows 服务安装

    Windows服务作用:定时用户消息推送,WEB程序实时统计等 Windows服务创建:C#创建服务的方式也有很多种,建议大家在做之前可以先全面了解一下这方面东西再去动手这样便于解决中间遇到一些比较棘 ...

  3. 测试Javacript里的checkbox是否被选中的status和checked的替换方法

    测试Javacript里的checkbox是否被选中的status和checked的替换方法,checkbox.checked和checkbox.status的功能一样,注意checkbox.stat ...

  4. Hibernate5.2之一对一主键关联(四)

                                                      Hibernate5.2之一对一主键关联(四) 一.简介 一对一关联关系分为两种:a.主键关联:b. ...

  5. 拥抱高效、拥抱 Bugtags 之来自用户的声音 2

    小编按:这是一篇 Bugtags 用户来稿,主要是介绍了使用 Bugtags 前后对测试及解决 Bug 所带来的变化,感谢单车娱乐 App 工程师 - 李斌同学对 Bugtags 的信赖和支持.小编在 ...

  6. Linux添加主机路由

    Linux添加主机路由:参考:http://zhidao.baidu.com/link?url=50qQ232ZiJqq1iftHvBdPzZh-JlQGi1DZ8wvF-j9dvQYsKiNgc-6 ...

  7. expr 命令

    求表达式变量的值.expr 命令读入 Expression 参数,计算它的值,然后将结果写入到标准输出. 用法:expr Expression Expression 参数规则: 用空格隔开每个项. 用 ...

  8. 尚学堂Spring视频教程（一）：模拟Spring

    Spring简单的说就是作为控制反转的容器,看这篇文章前需要先搞懂“控制反转和依赖注入“这个设计模式 我们先来模拟Spring,实现用户添加的功能,新建WEB项目”Spring_0100_Abstra ...

  9. sql 删除重复数据且保留其中一条 用sql 关键字：with ROW_NUMBER

    --1.建立表:Coursecreate table Course( ID int identity(1,1),--ID Student varchar(20) ,--学生 Sub varchar(2 ...

  10. ASP.NET权限管理

    ASP.NET Web Forms权限管理: 我要将一个文件夹只能让一个用户组访问怎么办? 可否在网站根目录下的web.config里这样设置: <location path="adm ...