• 三组基本动画

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 400px;

      height: 400px;

      background-color: pink;

      display: none;

    }

  </style>

</head>

<body>

<input type="button" value="显示">

<input type="button" value="隐藏">

<div></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    $("input").eq(0).click(function () {

      //show不传参数，没有动画效果

      //$("div").show();

      //show(speed)

      //speed:动画的持续时间  可以是毫秒值 还可以是固定字符串

      //fast:200ms   normal:400ms   slow:600

      //$("div").show("ddd");

      // show([speed], [callback])

      $("div").show(1000, function () {

        console.log("哈哈，动画执行完成啦");

      })

    });

    $("input").eq(1).click(function () {

      $("div").hide();

    })

  });

</script>

</body>

</html>

　　

滑入滑出

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 400px;

      height: 400px;

      background-color: pink;

      display: none;

    }

  </style>

</head>

<body>

<input type="button" value="显示">

<input type="button" value="隐藏">

<input type="button" value="切换">

<div></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //滑入（slideDown）  滑出：slideU

    $("input").eq(0).click(function () {

      //slideDown：如果不传参数，有一个默认值normal

      //$("div").slideDown();

      //$("div").slideDown(1000);

      $("div").slideDown(1000, function () {

        console.log("额呵呵");

      });

    });

    $("input").eq(1).click(function () {

      $('div').slideUp();

    })

    $("input").eq(2).click(function () {

      //如果是滑入状态，就执行滑出的动画，

      $('div').slideToggle();

    })

  });

</script>

</body>

</html>

　　淡入淡出

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 400px;

      height: 400px;

      background-color: pink;

      display: none;

    }

  </style>

</head>

<body>

<input type="button" value="显示">

<input type="button" value="隐藏">

<input type="button" value="切换">

<div></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //淡入：fadeIn  淡出：fadeOut    切换：fadeToggle

    $("input").eq(0).click(function () {

      $("div").fadeIn(2000);

    });

    $("input").eq(1).click(function () {

      $("div").fadeOut(1000);

    })

    $("input").eq(2).click(function () {

      //如果是滑入状态，就执行滑出的动画，

      $('div').fadeToggle();

    })

  });

</script>

</body>

</html>

　　下拉菜单案例

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

    }

    .wrap {

      width: 330px;

      height: 30px;

      margin: 100px auto 0;

      padding-left: 10px;

      background-image: url(imgs/bg.jpg);

    }

    .wrap li {

      background-image: url(imgs/libg.jpg);

    }

    .wrap > ul > li {

      float: left;

      margin-right: 10px;

      position: relative;

    }

    .wrap a {

      display: block;

      height: 30px;

      width: 100px;

      text-decoration: none;

      color: #000;

      line-height: 30px;

      text-align: center;

    }

    .wrap li ul {

      position: absolute;

      top: 30px;

      display: none;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //mouseover：鼠标经过事件

      //mouseout:鼠标离开事件

      //mouseenter:鼠标进入事件

      //mouseleave：鼠标离开事件

      var $li = $(".wrap>ul>li");

      //给li注册鼠标经过事件，让自己的ul显示出来

      $li.mouseenter(function () {

        //找到所有的儿子，并且还得是ul

        //stop：停止当前正在执行的动画

        $(this).children("ul").stop().slideDown();

      });

      $li.mouseleave(function () {

        $(this).children("ul").stop().slideUp();

      });

    });

  </script>

</head>

<body>

<div class="wrap">

  <ul>

    <li>

      <a href="javascript:void(0);">一级菜单1</a>

      <ul class="ul">

        <li><a href="javascript:void(0);">二级菜单11</a></li>

        <li><a href="javascript:void(0);">二级菜单12</a></li>

        <li><a href="javascript:void(0);">二级菜单13</a></li>

      </ul>

    </li>

    <li>

      <a href="javascript:void(0);">一级菜单2</a>

      <ul>

        <li><a href="javascript:void(0);">二级菜单21</a></li>

        <li><a href="javascript:void(0);">二级菜单22</a></li>

        <li><a href="javascript:void(0);">二级菜单23</a></li>

      </ul>

    </li>

    <li>

      <a href="javascript:void(0);">一级菜单3</a>

      <ul>

        <li><a href="javascript:void(0);">二级菜单31</a></li>

        <li><a href="javascript:void(0);">二级菜单32</a></li>

        <li><a href="javascript:void(0);">二级菜单33</a></li>

      </ul>

    </li>

  </ul>

</div>

</body>

</html>

　　轮播图案例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>京东商城</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .slider {

      height: 340px;

      width: 790px;

      margin: 100px auto;

      position: relative;

    }

    .slider li {

      position: absolute;

      display: none;

    }

    .slider li:first-child {

      display: block;

    }

    .arrow {

      display: none;

    }

    .slider:hover .arrow {

      display: block;

    }

    .arrow-left,

    .arrow-right {

      font-family: "SimSun", "宋体";

      width: 30px;

      height: 60px;

      background-color: rgba(0, 0, 0, 0.1);

      position: absolute;

      top: 50%;

      margin-top: -30px;

      cursor: pointer;

      text-align: center;

      line-height: 60px;

      color: #fff;

      font-weight: 700;

      font-size: 30px;

    }

    .arrow-left:hover,

    .arrow-right:hover {

      background-color: rgba(0, 0, 0, .5);

    }

    .arrow-left {

      left: 0;

    }

    .arrow-right {

      right: 0;

    }

  </style>

</head>

<body>

<div class="slider">

  <ul>

    <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/8.jpg" alt=""></a></li>

  </ul>

  <!--箭头-->

  <div class="arrow">

    <span class="arrow-left"><</span>

    <span class="arrow-right">></span>

  </div>

</div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    var count = 0;

    $(".arrow-right").click(function () {

      count++;

      if(count == $(".slider li").length){

        count = 0;

      }

      console.log(count);

      //让count渐渐的显示，其他兄弟渐渐的隐藏

      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();

    });

    $(".arrow-left").click(function () {

      count--;

      if(count == -1){

        count = $(".slider li").length - 1;

      }

      console.log(count);

      //让count渐渐的显示，其他兄弟渐渐的隐藏

      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();

    })

  });

</script>

</body>

</html>
  • 　　自定义动画
<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 100px;

      height: 100px;

      background-color: pink;

      position: absolute;

    }

    #box2 {

      background-color: blue;

      margin-top: 150px;

    }

    #box3 {

      background-color: yellowgreen;

      margin-top: 300px;

    }

  </style>

</head>

<body>

<input type="button" value="开始">

<input type="button" value="结束">

<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    $("input").eq(0).click(function () {

      //第一个参数：对象，里面可以传需要动画的样式

      //第二个参数：speed 动画的执行时间

      //第三个参数：动画的执行效果

      //第四个参数：回调函数

      $("#box1").animate({left:800}, 8000);

      //swing:秋千 摇摆

      $("#box2").animate({left:800}, 8000, "swing");

      //linear:线性 匀速

      $("#box3").animate({left:800}, 8000, "linear", function () {

        console.log("hahaha");

      });

    })

  });

</script>

</body>

</html>

　　

手风琴案例

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

      width: 1300px;

    }

    #box {

      width: 1200px;

      height: 400px;

      border: 2px solid red;

      margin: 100px auto;

    }

    #box li {

      width: 240px;

      height: 400px;

      /*border: 1px solid #000;*/

      float: left;

    }

  </style>

</head>

<body>

<div id="box">

  <ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

  </ul>

</div>

<script src="../jquery-1.12.4.js"></script>

<script>

  $(function () {

    var $li = $("#box li");

    for (var i = 0; i < $li.length; i++) {

      $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");

    }

    //给所有的li注册鼠标经过事件

    $li.mouseenter(function () {

      $(this).stop().animate({width:800}).siblings().stop().animate({width:100});

    }).mouseleave(function () {

      $li.stop().animate({width:240});

    });

  });

</script>

</body>

</html>

　　动画队列

$(function () {

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

      //把这些动画存储到一个动画队列里面

      $("div").animate({left:800})

        .animate({top:400})

        .animate({width:300,height:300})

        .animate({top:0})

        .animate({left:0})

        .animate({width:100,height:100})

    })

  });

　　

停止动画操作

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 400px;

      height: 400px;

      background-color: pink;

      display: none;

    }

  </style>

</head>

<body>

<input type="button" value="开始">

<input type="button" value="结束">

<div></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    $("input").eq(0).click(function () {

      $("div").slideDown(4000).slideUp(4000);

    });

    $("input").eq(1).click(function () {

      //stop:停止当前正在执行的动画

      //clearQueue:是否清除动画队列 true  false

      //jumpToEnd:是否跳转到当前动画的最终效果 true false

      //.stop().animate();

      $("div").stop(true, true);

    })

  });

</script>

</body>

</html>

　　

jQuery基础--动画操作的更多相关文章

  1. jQuery基础---动画效果

    内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性  发文不易,转载请注明出处~ 一．显示.隐藏 jQuery 中显示方法 ...

  2. JQuery基础DOM操作

    DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...

  3. 前端jQuery之动画操作及相关演示

    1.显示动画 1.1无参数,直接让指定的元素显示出来 $("div").show(); 1.2通过控制宽高,透明度,display属性逐渐显示,指定时间现实完毕 $('div'). ...

  4. jQuery基础--CSS操作、class操作、attr操作、prop操作

    1.1.1    css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使 ...

  5. Jquery基础之动画操作

    Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...

  6. jQuery基础（四）动画

    1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法. ...

  7. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  8. jQuery里面的常用的事件和基础动画的实现

    一:了解jquery里面常用的事件 二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...

  9. jQuery的一些基本的函数和用jQuery做一些动画操作

    jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...

随机推荐

  1. python字符串中的转义符

    python字符串中的转义符 1,单引号,双引号,三引号 a='www.96net.com.cn',b="96net.com.cn",c="""96n ...

  2. ssh传文件

    #coding=utf-8 import paramiko transport = paramiko.Transport(('192.168.70.129',22)) transport.connec ...

  3. 利用JFreeChart生成简单柱状图(Java)

    package barchartdemo1; import <a href="http://lib.csdn.net/base/javaee" class='replace_ ...

  4. [书接上一回]在Oracle Enterprise Linux (v5.7) 中安装DB - (3/4)

    安装p10404530_112030_Linux-x86-64_6of7.zip解压下的example. 修改软件路径,为dbhome_1. 安装好数据,则可以进行快照操作! 删除安装文件. 输入db ...

  5. sqoop使用中文手册

    文章转载自:http://www.zihou.me/html/2014/01/28/9114.html 1.     概述 本文档主要对SQOOP的使用进行了说明,参考内容主要来自于Cloudera ...

  6. C++ 编译器的安装（MinGW）

    GNU GNU是一个自由软件工程项目,GNU工程已经开发了一个被称为“GNU”(GNU是“不是UNIX”的缩写)的.对Unix向上兼容的完整的自由软件系统(free software system). ...

  7. VMware新加网卡NAT连接（内网）出现本机与虚拟机ping不通的问题

    今新加网卡NAT连接,配置好之后始终出现eth1:link is not ready. 虚拟机与本机不能建立连接. 解决方案:windows里面打开服务开启VMware NAT Service,并关闭 ...

  8. [资料] 常见的IC芯片解密方法与原理解析！

    其实了解芯片解密方法之前先要知道什么是芯片解密,网络上对芯片解密的定义很多,其实芯片解密就是通过半导体反向开发技术手段,将已加密的芯片变为不加密的芯片,进而使用编程器读取程序出来.   芯片解密所要具 ...

  9. BZOJ-1907 树的路径覆盖 贪心

    题意:给一个n个点的树,求树的最小路径覆盖.(这个最小路径覆盖不能有重点) 解法:往图论方向想很久,想得太复杂了,其实直接贪心.这个大佬题解写得很好: https://blog.csdn.net/bl ...

  10. less: 变量

    在Less中声明变量方式是使用@符号 @test_width: 300px; .box { width: @test_width; height: @test_width; background-co ...