03-jQuery动画效果

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

显示动画

方式一：

  $("div").show();

解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二：

$('div').show(3000);

解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

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

参数可以是：

  • slow 慢：600ms

  • normal 正常：400ms

  • fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

 //show(毫秒值，回调函数;$("div").show(5000,function () {alert("动画执行完毕！");});

解释：动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

隐藏动画

方式参照上面的show()方法的方式。如下：

    $(selector).hide();$(selector).hide(1000); $(selector).hide("slow");$(selector).hide(1000, function(){});

实现点击按钮显示盒子，再点击按钮隐藏盒子

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box{width: 200px;height: 200px;background-color: green;border: 1px solid red;display: none;}</style></head><body><div id="box">        </div><button id="btn">隐藏</button>    </body><script src="jquery-3.3.1.js"></script><script type="text/javascript">//jquery 提供了一些方法 show() hide() 控制元素显示隐藏var isShow = true;$('#btn').click(function(){if(isShow){$('#box').show('slow',function(){$(this).text('盒子出来了');            $('#btn').text('显示');isShow = false;})}else{$('#box').hide(2000,function(){$(this).text('');    $('#btn').text('隐藏');isShow = true;})}})</script>
</html>

开关式显示隐藏动画

$('#box').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

代码如下：

    $('#btn').click(function(){$('#box').toggle(3000,function(){$(this).text('盒子出来了');    if ($('#btn').text()=='隐藏') {$('#btn').text('显示');    }else{$('#btn').text('隐藏');    }});})

滑入和滑出

1、滑入动画效果：（类似于生活中的卷帘门）

$(selector).slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

2、滑出动画效果：

 $(selector).slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

3、滑入滑出切换动画效果：

 $(selector).slideToggle(speed, 回调函数);

代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>div {width: 300px;height: 300px;display: none;background-color: green;}</style><script src="jquery-3.3.1.js"></script><script>$(function () {//点击按钮后产生动画$("button:eq(0)").click(function () {//滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);$("div").slideDown(2000, function () {alert("动画执行完毕！");});})//滑出动画$("button:eq(1)").click(function () {//滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);$("div").slideUp(2000, function () {alert("动画执行完毕！");});})$("button:eq(2)").click(function () {//滑入滑出切换（同样有四种用法）$("div").slideToggle(1000);})})</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div></body>
</html>

淡入淡出动画

1、淡入动画效果：

 $(selector).fadeIn(speed, callback);

作用：让元素以淡淡的进入视线的方式展示出来。

2、淡出动画效果：

$(selector).fadeOut(1000);

作用：让元素以渐渐消失的方式隐藏起来

3、淡入淡出切换动画效果：

 $(selector).fadeToggle('fast', callback);

作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>div {width: 300px;height: 300px;display: none;/*透明度*/opacity: 0.5;background-color: red;}</style><script src="jquery-3.3.1.js"></script><script>$(function () {//点击按钮后产生动画$("button:eq(0)").click(function () {//                //淡入动画用法1:   fadeIn();   不加参数$("div").fadeIn();//                //淡入动画用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //通过控制  透明度和display//淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");//淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeIn(5000,function () {
//                    alert("动画执行完毕！");
//                });})//滑出动画$("button:eq(1)").click(function () {
//                //滑出动画用法1:   fadeOut();   不加参数$("div").fadeOut();//                //滑出动画用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
//                //通过控制  透明度和display//滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");//滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeOut(2000,function () {
//                    alert("动画执行完毕！");
//                });})$("button:eq(2)").click(function () {//滑入滑出切换//同样有四种用法$("div").fadeToggle(1000);})$("button:eq(3)").click(function () {//改透明度//同样有四种用法$("div").fadeTo(1000, 0.5, function () {alert(1);});})})</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div></body>
</html>

自定义动画

语法：

 $(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

  • 第一个参数表示：要执行动画的CSS属性（必选）

  • 第二个参数表示：执行动画时长（可选）

  • 第三个参数表示：动画执行完后，立即执行的回调函数（可选）

代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>div {position: absolute;left: 20px;top: 30px;width: 100px;height: 100px;background-color: green;}</style><script src="jquery-3.3.1.js"></script><script>jQuery(function () {$("button").click(function () {var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};var json2 = {"width": 100,"height": 100,"left": 100,"top": 100,"border-radius": 100,"background-color": "red"};//自定义动画$("div").animate(json, 1000, function () {$("div").animate(json2, 1000, function () {alert("动画执行完毕！");});});})})</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>

停止动画

$(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

  • true：后续动画不执行。

  • false：后续动画会执行。

第二个参数：

  • true：立即执行完成当前动画。

  • false：立即停止当前动画。

PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）

<!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-color: pink;}.wrap li {background-color: green;}.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-3.3.1.js"></script><script>//入口函数$(document).ready(function () {//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。var jqli = $(".wrap>ul>li");//绑定事件jqli.mouseenter(function () {$(this).children("ul").stop().slideDown(1000);});//绑定事件(移开隐藏)jqli.mouseleave(function () {$(this).children("ul").stop().slideUp(1000);});});</script></head>
<body>
<div class="wrap"><ul><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li><li><a href="javascript:void(0);">二级菜单4</a></li></ul></li><li><a href="javascript:void(0);">二级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li><li><a href="javascript:void(0);">二级菜单4</a></li></ul></li><li><a href="javascript:void(0);">三级菜单1</a><ul><li><a href="javascript:void(0);">三级菜单2</a></li><li><a href="javascript:void(0);">三级菜单3</a></li><li><a href="javascript:void(0);">三级菜单4</a></li></ul></li></ul>
</div>
</body>
</html>

ps:

javascript:void(0); //跟javascript:;效果一样

上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。

转载于:https://www.cnblogs.com/liuafan/p/9525876.html

前端 ----jQuery的动画效果相关推荐

  1. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  2. 第一百七十二节，jQuery，动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...

  3. JQuery渐变色动画效果

    JQuery渐变色动画效果 jquery.gradientify.min.js插件 渐变色插件链接 在页面中引入js库与插件 <script src="js\jquery-3.0.0. ...

  4. java easing_[Java教程]jQuery Easing 动画效果扩展

    [Java教程]jQuery Easing 动画效果扩展 0 2015-11-20 11:00:03 官网:http://gsgd.co.uk/sandbox/jquery/easing/ jQuer ...

  5. jQuery Easing 动画效果扩展

    官网: http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果, 一款jQuery动画效果扩展增强插件j ...

  6. jQuery animate动画效果

    jQuery animate动画效果 1.animate动画效果 2.animate回调函数 3.参数为数学表达式形式 4.滑动选项卡 1.animate动画效果 <!DOCTYPE html& ...

  7. jQuery基本动画效果

    jQuery基本动画效果 1.show() 用于显示页面元素与之相对应的hide() 测试案例: <p title="标题">测试</p> <ul s ...

  8. jquery中动画效果的函数

    在jquery中有很多的动画效果,我给大家分享了一下jquery中的动画函数 jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueu ...

  9. jQuery之动画效果

    1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow"," ...

最新文章

  1. 河科大c语言上机实验答案,2016年河南科技学院信息工程学院C语言上机编程考研复试题库...
  2. Cisco WLAN 控制器的配置
  3. p1522 牛的旅行 Cow Tours
  4. CodeForces - 727D T-shirts Distribution(贪心)
  5. 微服务架构 接口交互问题_架构师的故事：设计微服务架构
  6. 多线程面试题系列（12）：多线程同步内功心法——PV操作上
  7. 给Hangfire的webjob增加callback和动态判断返回结果功能设计
  8. 配置了坐标还是找不到serv_为什么老人家总是这疼那疼，还找不到原因？是矫情还是另有原因...
  9. android 日历仿IOS,基于Android week view仿小米和iphone日历效果
  10. 啊！多么痛的领悟···
  11. 【转】HDC，CDC，CWindowDC，CClientDC，CPaintDC等等
  12. 2 Linux基本命令复习2
  13. 在Mac电脑中配置ios模拟器
  14. 简谈【自动化协议逆向工程技术的当前趋势】
  15. 《ZigBee开发笔记》第四部分 提高篇-第1章 CC2530协议栈剖析
  16. css 实现一个尖角_如何用CSS实现一个带尖角的框？
  17. 【致远FAQ】V8.0sp2_8.0sp2版本协同BPM平台的人员匹配去重
  18. CocosCreator2.3.3 Effect中换算图集中UV
  19. spss下载过程中无法解压的问题
  20. 老师怎么制作网上查分系统？

热门文章

  1. 使用微软提供的Office Online实现Office文档的在线查看,编辑等功能
  2. 自制的一个eclipse 插件jcodesmith（代码生成器）
  3. HubbleDotNet 简介 (转)
  4. 针对19端口的Chargen进行Dos***
  5. 产品经理入门_所以您想成为产品经理？ 这就是我的入门方式。
  6. mysqlls_mysql基本命令
  7. java培训教程分享：Java中怎样将数据对象序列化和反序列化?
  8. java培训分享：学习java开发的优势是什么
  9. java开发培训好学习吗?难度大不大?
  10. baidumap api MySQL_百度地图API开发笔记一(基础篇)