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& ...

随机推荐

SpringBoot 集成MyBatis 中的@MapperScan注解
SpringBoot 集成MyBatis 中的@MapperScan注解 2018年08月17日 11:41:02 文火慢炖阅读数:398更多个人分类: 环境搭建在SpringBoot中集成My ...
微信小程序点击保存图片到相册
wxml部分的代码 <view class="footer-r" bindtap="save"> <image src="../ ...
DNS服务的安装
DNS服务器原理及配置域名讲解 www.baidu.com 完整的域名,通常.来进行分割三个部分:www是主机名,baidu是域名,com是类型主机名 + 域名 + 类型构成完整的域名 DNS服 ...
Linux性能优化从入门到实战：15 文件系统篇：磁盘 I/O
磁盘磁盘是可以持久化存储的设备,按照存储介质来分类: (1)机械磁盘(硬盘驱动器,Hard Disk Driver,HDD),主要由盘片和读写磁头组成,数据就存储在盘片的环状磁道中.在读写数 ...
NOIP2017 Day2 T1 奶酪(并查集)
题目描述现有一块大奶酪,它的高度为 hhh ,它的长度和宽度我们可以认为是无限大的,奶酪中间有许多半径相同的球形空洞.我们可以在这块奶酪中建立空间坐标系,在坐标系中, 奶酪的下表面为z=0z ...
SQL 1 数据库表的操作
数据库:是按照数据结构来组织.存储和管理数据的建立在计算机存储设备上的仓库.一句话就是存储数据的仓库数据库的分类:网络数据库.层级数据库.关系结构数据库. 倘若按照数据库的存储介质来分:关系型数据库 ...
php object
一.访问控制 <?php class Computer{ public $cpu = 880; private $name = 'xiaomi'; public function getname ...
通过反射获取方法的参数名称（JDK8以上支持）
方法的参数名,在很多时候我们是需要反射得到的.但是在java8之前,代码编译为class文件后,方法参数的类型是固定的,但参数名称却丢失了,这和动态语言严重依赖参数名称形成了鲜明对比.(java是静态 ...
$[WC2018]$通道（虚树，边分练习）
$[WC2018]$通道(虚树,边分练习) 感受码题的快感这段时间真的是忙忙忙忙忙,省选之前还是露个脸,免得以后没机会了. 但是我感觉我的博客真的没啥人看,虽然我挺想要有人看的,但是自己真的没啥 ...
覆盖（Override）和重写（Overload）的区别
Overload Overload是重载的意思. 重载Overload表示同一个类中可以有多个名称相同的方法,但这些方法的参数列表各不相同(即参数个数或类型不同). Overload对我们来说可能比较 ...

jQuery基础--动画操作

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

随机推荐

热门专题