动画：

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. My Open Source Projects

    • MyMagicBox (https://github.com/yaoyansi/mymagicbox)   Role: Creator   Miscellaneous projects for e ...

  2. servlet简单用法和配置示例及说明

    学习原因和目的:   我如今所接触的项目都是bs模式的web应用,而里边基本上都是用的spring MVC和前台交互,servlet貌似用的很少.   但是即便是用spring和spring MVC, ...

  3. Visual studio 类视图和资源视图不显示的问题

    关于Visual studio 类视图和资源视图不显示的问题 解决方法: 1. 工具—选项—文本编辑器—C/C++—高级,浏览/导航下的禁用数据库选项置为False; 2. 输入命令:devenv / ...

  4. Spring Mvc Rest为不支持DELETE/PUT的浏览器添加DELETE/PUT支持

    现在都流行RESTFul,但是有一个问题,有些浏览器现在就不支持delete/put方式的请求,这些请求发出去之后都会变成get请求,导致rest接口无法被访问到.为了解决这个问题,spring提出了 ...

  5. BestCoder Round #90 A.Kblack loves flag(随机数生成种子)

    A.Kblack loves flag [题目链接]A.Kblack loves flag [题目类型]水题 &题意: kblack喜欢旗帜(flag),他的口袋里有无穷无尽的旗帜. 某天,k ...

  6. Lambda演算 - 简述Y组合子的作用

    Y组合子:\f.(\x.f(xx))(\x.f(xx)),接受一个函数,返回一个高阶函数 Y组合子用于生成匿名递归函数. 什么叫匿名递归函数,考虑以下C语言递归函数 int sum(int n) { ...

  7. ActiveX控件打包、签名、嵌入详解

    ActiveX控件打包.签名.嵌入详解 前言 在我们的一个项目中,使用到了大华网络监控摄像头枪机,网络上下载了其ActiveX插件,但是发现其所提供的类库没有打包处理.这就导致我们每次给用户安装的时候 ...

  8. (String). Word Pattern

    Given a pattern and a string str, find if str follows the same pattern. Here follow means a full mat ...

  9. CentOS开机无法进入系统，如何查错

    开机时按e/F5按钮,进入选择系统界面 会出现 CentOS(2.6.32-...类似的选择列表,选择默认的系统然后按e: 这时会出现 root kernel ... initd... 三个选项,选择 ...

  10. Sqlserver 自定义表类型定义，使用，删除

    --创建用户自定义表类型CREATE TYPE dbo.CustomerTable AS TABLE ( Id int NOT NULL, Name char(10) NULL, PRIMARY KE ...