jQuery基础--动画操作

三组基本动画

<!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基础--动画操作的更多相关文章

jQuery基础---动画效果
内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性发文不易,转载请注明出处~ 一．显示.隐藏 jQuery 中显示方法 ...
JQuery基础DOM操作
DOM创建节点及节点属性通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...
前端jQuery之动画操作及相关演示
1.显示动画 1.1无参数,直接让指定的元素显示出来 $("div").show(); 1.2通过控制宽高,透明度,display属性逐渐显示,指定时间现实完毕 $('div'). ...
jQuery基础--CSS操作、class操作、attr操作、prop操作
1.1.1 css操作功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使 ...
Jquery基础之动画操作
Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...
jQuery基础（四）动画
1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法. ...
jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）
1.jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
jQuery里面的常用的事件和基础动画的实现
一:了解jquery里面常用的事件二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...
jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...

随机推荐

SQLServer查看及设置最大连接数
很多时候自己本地开发会遇到 ,打开几个连接正常访问之后就报错误,这时候需要调整sqlserver 最大连接数. 1. 查询最大连接数 SELECT value_in_useFROM sys.conf ...
使用Kafka的一些简单介绍: 1集群 2原理 3 术语
目录第一节 Kafka 集群 Kafka 集群搭建 Kafka 集群快速搭建第二节集群管理工具集群管理工具集群 Issues 第三节使用命令操纵集群第四节 Kafka 术语说明第五节 ...
使用jQuery实现Socket客户端
摘于抄书web前端开发 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
Vue/React如何优雅的一劳永逸的注册路由及组件
原文链接: 本人掘金文章假如图片看不清晰可前往掘金原文预览官方文档: 组建注册路由注册未优化版: 在Vue官方文档中,我们通过 Vue.component('MyComponentNam ...
【转】WebRTC之RTCP
转自:https://blog.csdn.net/momo0853/article/details/88051312#RTPFBTransport_layer_FB_messagesNACKTrans ...
python os 常用命令
转载:http://www.cnblogs.com/kaituorensheng/archive/2013/03/18/2965766.html python编程时,经常和文件.目录打交道,这是就离不 ...
关于Python获取图片文件二进制数据的问题(获取为空)
在搭建fastdfs文件系统的时候遇到了点问题,在测试上传文件数据流的时候,需要Python来获取本地文件的二进制流 from fdfs_client.client import Fdfs_clien ...
struts2的相关知识（实现原理、拦截器）
struts2的实现原理客户端初始化一个指向Servlet容器(例如Tomcat)的请求这个请求经过一系列的过滤器(Filter)(这些过滤器中有一个叫做ActionContextCleanUp的 ...
man fdisk
FDISK(8) Linux Programmer?. Manual/Linux程序手册 FDISK(8) NAME/名称 fdisk - Partition ta ...
CollectionUtils工具类中常用方法
@SuppressWarnings("rawtypes") @Test public void test1() { List<String> coll = new Ar ...

jQuery基础--动画操作

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

随机推荐

热门专题