展开&收起动画&案例

HTML DOM overflow 属性
展开 slideDown(毫秒, 完成回调函数)
收起 slideUp(毫秒, 完成回调函数)
切换 slideToggle(毫秒, 完成回调函数)
案例：帷幔效果
案例：下拉菜单
js 中 == 与 === 的区别
案例：显示隐藏更多
案例：折叠菜单
- CSS cursor 属性：一些不同的光标。
- CSS3 transform 属性：旋转 div 元素
- end() 返回调用链的上一级。
- find() 搜索所有与指定表达式匹配的元素
- 案例代码

jQuery笔记目录

HTML DOM overflow 属性

overflow 属性规定如何处理如何处理不符合元素框的内容。

Object.style.overflow=visible|hidden|scroll|auto

值	描述
visible	内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	由浏览器决定如何显示。如果需要，则显示滚动条。

具体示例：菜鸟教程 CSS overflow 属性

展开 slideDown(毫秒, 完成回调函数)

$(this).slideDown(1000)

收起 slideUp(毫秒, 完成回调函数)

$(this).slideUp(1000);

切换 slideToggle(毫秒, 完成回调函数)

$('.wm').slideToggle(1000);

案例：帷幔效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}.box {width: 646px;height: 363px;margin: 100px auto;border: 1px solid orange;position: relative;overflow: hidden;}.box p {width: 100%;height: 100%;text-align: center;line-height: 360px;}.left {background: url("images/weiman_left.jpg") no-repeat;width: 343px;height: 363px;position: absolute;top: 0;left: 0;}.right {background: url("images/weiman_right.jpg") no-repeat;width: 303px;height: 363px;position: absolute;top: 0;right: 0;}</style>
</head>
<body><div class="box"><p>看什么看,关上!</p><div class="wm left"></div><div class="wm right"></div></div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {$('body').click(function () { /*点击body部分，调用切换*/$('.wm').slideToggle(1000);});$('.left').click(function () {event.stopPropagation(); /*阻止传播，即阻止了点击body 的事件*/$(this).slideUp(1000);  /*点击左边的帷幕div，则向上滑动*/});$('.right').click(function () {event.stopPropagation(); /*阻止传播，即阻止了点击body 的事件*/$(this).slideUp(1000); /*点击右边的帷幕div，则向上滑动*/})});
</script>
</body>
</html>

运行效果：
点击左侧帷幕，则左侧帷幕上滑；
点击右侧帷幕，则右侧帷幕上滑；
点击没有帷幕的部分，则左右帷幕状态各自切换。

案例：下拉菜单

stop() 方法具体用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery展开&收起动画案例-下拉菜单</title><style>* {padding: 0;margin: 0;list-style: none;}.firstNav {width: 600px;height: 44px;margin: 100px auto;border: 1px solid #cccccc;cursor: pointer; /*鼠标变为小手*/}.firstNav>li {width: 100px;float: left;text-align: center;}.firstNav>li>span {display: inline-block;width: 100%;height: 44px;line-height: 44px;}.secondNav {border: 1px solid #cccccc;border-top: none;}.secondNav>li {margin-top: 1px;}.secondNav {display: none;}.current .secondNav {display: block;}</style>
</head>
<body><ul class="firstNav"><li class="current"><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li></ul><script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {// 1.1 先让第一个二级菜单隐藏$('.firstNav>li.current .secondNav').css('display','none');// 1.2 监听鼠标进入/*$('.firstNav>li').hover(function () {$(this).children('.secondNav').slideDown(200);$(this).siblings().children('.secondNav').slideUp(200);},function () {$(this).children('.secondNav').slideUp(200);})// 此段代码与下面的代码效果相同*/$('.firstNav>li').hover(function () { // 给所有的一级菜单添加鼠标悬浮事件$(this).children('.secondNav').stop().slideToggle(200); // stop停止动画再调用切换，则只有当前元素有特效})});
</script></body>
</html>

运行效果：
鼠标停在哪个一级菜单，则这个一级菜单下拉二级菜单，鼠标移走则收回。

js 中 == 与 === 的区别

== 叫做相等运算符，只要值相等即可为真。
=== 叫做严格运算符，不仅要求值相等，类型也要求相等。

案例：显示隐藏更多

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery展开&收起动画案例-显示隐藏更多</title><style>* {padding: 0;margin: 0;list-style: none;}.box {width: 450px;border: 1px solid #ccc;margin: 100px auto;text-align: center;}.box ul {overflow: hidden;}.box ul>li {width: 150px;height: 30px;line-height: 30px;text-align: center;float: left; /*设置浮动，不设置的话li会一排排显示*/}.box button {width: 150px;height: 30px;line-height: 30px;border: 1px solid #909EAB;text-align: center;margin: 10px 0;}</style>
</head>
<body>
<div class="box"><ul><li>香蕉</li><li>苹果</li><li>梨子</li><li>猕猴桃</li><li>橙子</li><li>桃子</li><li>哈密瓜</li><li>西红柿</li><li>西瓜</li><li>荔枝</li><li>榴莲</li><li>人生果</li></ul><button>显示更多</button>
</div><script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {// 1.设置默认的隐藏$('.box>ul>li:gt(2)').hide() /*大于2的li隐藏*/// 2.监听按钮的点击$('.box>button').click(function () {// 2.1 改变文字var text = $(this).text() === '显示更多' ? '隐藏': '显示更多';$(this).text(text);$('.box>ul>li:gt(2)').slideToggle(); /*大于2的li进行切换*/})});
</script></body>
</html>

运行效果：
默认只显示前三个；
点击显示更多，则显示全部，并且按钮改成隐藏；
点击隐藏，则只显示前三个，并且按钮改成显示更多。

案例：折叠菜单

CSS cursor 属性：一些不同的光标。

cursor 具体用法（菜鸟教程）

CSS3 transform 属性：旋转 div 元素

transform 具体用法（菜鸟教程）

end() 返回调用链的上一级。

即，将匹配的元素列表变为前一次的状态。end() 具体用法

find() 搜索所有与指定表达式匹配的元素

这个函数是找出正在处理的元素的后代元素的好方法。find() 具体用法

案例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery展开&收起动画案例-折叠菜单</title><style>* {padding: 0;margin: 0;list-style: none;}.nav {width: 300px;margin: 100px auto;border: 1px solid orange;}.top {width: 300px;height: 30px;line-height: 30px;box-sizing: border-box;background: orange;border-bottom: 1px solid white;cursor: pointer;}.top .arrow {background: url("images/arrow_right.png") no-repeat;float: right;width: 16px;height: 16px;margin-top: 7px;}.list {width: 100px;display: none;}</style>
</head>
<body><ul class="nav"><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li>
</ul><script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {// 1. 监听li标签的点击$('.nav>li').click(function () {$(this).children('.list').slideDown().end().siblings().children('.list').slideUp();// 2. 处理箭头旋转$('.top .arrow').css({'transform': 'rotate(0deg)'});$(this).find('.arrow').css({'transform': 'rotate(90deg)'});})});
</script>
</body>
</html>

运行效果：
点击一级菜单，会产生二级菜单的下拉列表。

【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例相关推荐

【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例
jQuery淡入淡出动画-右下角广告 CSS display 属性淡入淡出动画案例 jQuery笔记目录 CSS display 属性 display 属性规定元素应该生成的框的类型. 值描述 n ...
【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...
收起展开循环 php,CSS3 实现侧边栏展开收起动画
这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画,并附上了示例代码,非常的详细,推荐给需要的小伙伴. @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式 ...
css3 updown 动画,Vue的transition中的slidedown,slideUp展开收起动画
vue transition动画 vue的transition过渡动画在vue官网已有详细教程,就不赘述了.然而当我们使用transition来实现slidedown,slideup的展开收起动画时, ...
html查看更多隐藏内容,jQuery点击显示隐藏更多文字内容插件jquery.morecontent.js
插件描述:这是一款jQuery显示隐藏更多文字内容插件.该插件可以将很长的一段文字按要求进行部分隐藏和全部展示,并且可以定制隐藏和展开内容时的动画效果. jquery.morecontent.js 这 ...
【jQuery笔记Part2】01-jQuery显示隐藏切换动画侧边广告案例
jQuery动画 jQuery动画动画分类 HTML DOM position 属性显示 show(毫秒, 完成回调函数) 隐藏 hide(毫秒, 完成回调函数) 切换 toggle(毫秒, 完成 ...
JQuery 向下展开收起动画( slideDown(),slideUp() )
$('#div1').slideDown(1000); //向下展开,下拉.1000毫秒,表示动画展开过程时间. $('#div1').slideUp(1000); //向上收起 $('#div1 ...
【jQuery笔记Part2】03-jQuery-addBack()与end()的区别-children()与find()的区别
前几章的方法对比与总结示例页面:3层div css():指定元素修改属性 parrent():返回父节点(被包装成jQuery对象) addBack():额外添加调用链上一级 end():选择调用链 ...
ios 圆形旋转菜单_iOS高级动画：圆形树展开收起动画
转自:标哥的技术博客,作者:黄仪标(微博) 前段时间帮某某做了一个动画效果,今天分享给大家.关于动画的基础知识,这里不会细说,如果您还没有核心动画的基础知识,请先阅读相关文章,了解核心动画如何使用,然 ...

【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例