jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法

鼠标移入时内容向下滑出，鼠标移开时内容向上滑动隐藏的三种方法

slideDown()：向下滑出直到全部显现；
slideUp（）：向上滑走直到消失；
slideToggle()：向下和向上滑动两个动作切换。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul,li {margin: 0;padding: 0;color: #7B68EE;}li {list-style: none;}.title {float: left;width: 100px;}.titleTxt {display: inline-block;width: 40px;}.sub {display: none;margin-top: 10px;width: 120px;}</style></head><body><ul><li class="title"> <span class="titleTxt">音乐</span><ul class="sub"><li>Perfect</li><li>One Day</li><li>Love story</li></ul></li><li class="title"> <span class="titleTxt">电影</span><ul class="sub"><li>唐人街探案3</li><li>你好，李焕英</li><li>刺杀小说家</li></ul></li><li class="title"> <span class="titleTxt">综艺</span><ul class="sub"><li>王牌对王牌</li><li>青春环游记</li><li>running man</li></ul></li></ul><script src="../../jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// 鼠标悬浮在标题上子内容展开$(function() {// 方法一:$('.titleTxt').mouseover(function() {$(this).parent().children('ul').stop().slideDown()})$('.titleTxt').mouseout(function() {$(this).parent().children('ul').stop().slideUp()})// 方法二：// hover是鼠标经过和鼠标移开的复合写法$('.titleTxt').hover(function() {//鼠标移入$(this).parent().children('ul').stop().slideDown()},function() {//鼠标移出$(this).parent().children('ul').stop().slideUp()})// 方法三：$('.titleTxt').hover(function() {//鼠标移入移出执行的同一个函数，就只用写一个函数$(this).parent().children('ul').stop().slideToggle()})})</script></body>
</html>

注意：每个效果前我都加了stop( )，是为了停止排队，动画或效果一旦触发就会执行，如果多次触发，就会造成效果或队列排队执行
stop（）的功能是停止动画或效果，相当于结束上一次动画或效果。

运行效果如下：
鼠标不悬浮在任何一个标题上时：
悬浮在音乐上时：

jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法相关推荐

Jquery滑动开关操作（slideDown, slideUp, slideToggle）
Jquery滑动开关操作(slideDown, slideUp, slideToggle) #滑动开关很好玩 CSS代码 JS代码 HTML代码效果图 #滑动开关很好玩这个章节主要是学习用Jque ...
JQuery之滑动效果slideDown ， slideUp , slideToggle
slideDown(speed,callback) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配 ...
JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle
滑动显示和隐藏方式 slideDown([speed], [easing],[fn]) slideup( [ speed, [easing],[fn]]) slideToggle([speed], [ ...
15优秀免费JQuery 图片滑动效果
免费jquery滑块图片的网站. 滑块插件帮助显示华丽的动画效果. 15优秀免费JQuery 图片滑块在这篇文章里,我们想展示你的列表15优秀免费jquery图像滑块插件2015可以使用它来构建一 ...
jQuery滑动效果
1.1 jQuery中的滑动效果 ① slideDown():概述: 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配 ...
jquery滑动效果及事件切换
1.滑动效果还有一个slideToggle方法:它的功能可以让元素动态地上滑或者下滑,如若动画是下滑的,它可以动态切换为上滑,如若动画是上滑的,它可以动态切换为下滑从滑动的变化来看得出以下结论: ...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...
jQuery学习之---效果
今天继续学习一下jQuery,主要记录一下jQuery的那些效果显示 1.animate() 函数 animate() 方法执行 CSS 属性集的自定义动画. 该方法通过CSS样式将元素从一个状态改变 ...
jQuery 效果 ——slideDown() 方法、slideToggle() 方法、slideUp() 方法
slideDown() 方法定义和用法 slideDown() 方法通过使用滑动效果,显示隐藏的被选元素. 语法 $(selector).slideDown(speed,callback) 参数描 ...

jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法

鼠标移入时内容向下滑出，鼠标移开时内容向上滑动隐藏的三种方法

jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法相关推荐

最新文章

热门文章