jq动画函数：show（）、hide（）、toggle（）、slideDown（）、slideUp（）、slideToggle（）、fadeIn ()、fadeOut ()、fadeToggle ()

jq动画分为：基本动画和综合动画；
基本动画的作用都是显示隐藏；
综合动画是将自定义的属性放进去设置；
基本动画分为：
show（）、hide（）、toggle（）：相对于左上角显示隐藏；
slideDown（）、slideUp（）、slideToggle（）：在高度上显示隐藏；
fadeIn（）、fadeOut（）、fadeToggle（）：是关于透明度上的显示隐藏；
基本动画的参数：
一共三个参数：（动画执行事件，动画效果，动画执行完以后回调函数）；
动画效果有两种：
swing（默认）、linear（匀速）
综合动画指的是：animate（）

1、基本动画介绍：

show（）、hide（）、toggle（）：控制高度、宽度和透明度的变化；
show（）作用：从左上角沿着对角线显示；
hide（）作用：沿着对角线往左上角隐藏；
toggle（）作用：是切换的作用，如果属性在显示着，就让它隐藏；如果在隐藏着，就让它显示；

<script>$("#myshow").click(function(){$("#box").show(1000,"linear",()=>{console.log("显示完成")})})$("#myhide").click(function(){$("#box").hide(1000,"linear",()=>{console.log("隐藏完成")})})$("#mytoggle").click(function(){$("#box").toggle(1000,"linear",()=>{console.log("切换")})})
</script>

完整代码：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 300px;height: 300px;background-color: yellow;}</style><script src="./lib/jquery-3.6.1.js"></script>
</head>
<body><button id="myshow">显示</button><button id="myhide">隐藏</button><button id="mytoggle">切换</button><div id="box"></div><script>$("#myshow").click(function(){$("#box").show(1000,"linear",()=>{console.log("显示完成")})})$("#myhide").click(function(){$("#box").hide(1000,"linear",()=>{console.log("隐藏完成")})})$("#mytoggle").click(function(){$("#box").toggle(1000,"linear",()=>{console.log("切换")})})</script>
</body>

结果：

slideDown（）、slideUp（）、slideToggle（）：是控制高度的，高度发生改变，从而是实现显示和隐藏的效果；
slideDown（）：从上往下，高度从低变高，放的一个过程，显示的功能；
slideUp（）：从下往上，高度从高变低，收的一个过程，隐藏的功能；
slideToggle（）：切换，显示着就让它隐藏，隐藏着就让它显示；

代码：（剩下的代码和上面的一样）

<script>$("#myDown").click(function(){$("#box").slideDown(1000,"linear",()=>{console.log("显示完成")})})$("#myUp").click(function(){$("#box").slideUp(1000,"linear",()=>{console.log("隐藏完成")})})$("#mytoggle").click(function(){$("#box").slideToggle(1000,"linear",()=>{console.log("切换")})})</script>

结果：

fadeIn ()、fadeOut ()、fadeToggle ()、fadeTo ()：控制透明度来实现显示和隐藏的功能；
fadeIn ():显示的过程，透明度由0变为1；
fadeOut ():隐藏的过程，透明度由1变为0；
fadeToggle ()：切换，显示时，让它隐藏；隐藏时让他显示；
fadeTo (4个参数)：指定到透明度，参数有4个，第2个参数时设置透明度的；

<script>$("#myDown").click(function(){$("#box").fadeIn(1000,"linear",()=>{console.log("显示完成")})})$("#myUp").click(function(){$("#box").fadeOut(1000,"linear",()=>{console.log("隐藏完成")})})$("#mytoggle").click(function(){$("#box").fadeToggle(1000,"linear",()=>{console.log("切换")})})$("#myfade").click(function(){$("#box").fadeTo(1000,0.2,"linear",()=>{console.log("切换")})})
</script>

结果：

2、综合动画

限制：不支持过渡的样式、颜色变化不支持、transform不支持；

<body><div id="box"></div><script>$("#box").animate({width:100},1000,"linear",()=>{console.log("执行完毕")})</script>
</body>

animate（）：四个参数，第一个参数是对象，也就是要设置的属性都在这里面设置，第2,3,4参数和上面基本动画一样；

3、stop（）、finish（）

stop（）：停止动画，运动到哪里，就停在那里；
finish（）：停止动画，运动到哪，立即到完成位置；
停止动画一般都是在其他动画函数之前调用；
先停止其他的动画再去执行当前的动画；

<body><div id="box"></div><script>$("#box").stop().animate({width:100},1000,"linear",()=>{console.log("执行完毕")})</script>
</body>

运用案例请参考：
jq案例--手风琴：stop（）应用_陌一一的博客-CSDN博客

jq制作滑动选项卡-mouseover()、stop()、animate（）综合应用_陌一一的博客-CSDN博客

jq动画函数：show（）、hide（）、toggle（）、slideDown（）、slideUp（）、slideToggle（）、fadeIn ()、fadeOut ()、fadeToggle ()相关推荐

Jquery滑动开关操作（slideDown, slideUp, slideToggle）
Jquery滑动开关操作(slideDown, slideUp, slideToggle) #滑动开关很好玩 CSS代码 JS代码 HTML代码效果图 #滑动开关很好玩这个章节主要是学习用Jque ...
JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle
滑动显示和隐藏方式 slideDown([speed], [easing],[fn]) slideup( [ speed, [easing],[fn]]) slideToggle([speed], [ ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
jQuery动画函数
jQuery动画函数分三类: 1.基本动画函数:既有透明渐变又有滑动效果,常用动画效果. 2.滑动动画函数:仅使用滑动效果. 3.淡入淡出动画函数:仅使用淡入淡出效果. 一.基本动画函数: 1.sho ...
jq 方法函数（淡入淡出，查找元素，过滤）遍历
淡入淡出:fadeIn fadeOut fadeToggle fadeTo 淡入:fadeIn(speed[,callback]) 速度和回调函数回调函数可以写匿名函数,或者方法名不加括号. s ...
JQuery 向下展开收起动画( slideDown(),slideUp() )
$('#div1').slideDown(1000); //向下展开,下拉.1000毫秒,表示动画展开过程时间. $('#div1').slideUp(1000); //向上收起 $('#div1 ...
Jq学习笔记（7）JQ动画
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你会 ...
js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些一.总结一句话总结: 二.jquery动画函数有哪些原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
JQuery之滑动效果slideDown ， slideUp , slideToggle
slideDown(speed,callback) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配 ...

jq动画函数：show（）、hide（）、toggle（）、slideDown（）、slideUp（）、slideToggle（）、fadeIn ()、fadeOut ()、fadeToggle ()

1、基本动画介绍：

2、综合动画

3、stop（）、finish（）

jq动画函数：show（）、hide（）、toggle（）、slideDown（）、slideUp（）、slideToggle（）、fadeIn ()、fadeOut ()、fadeToggle ()相关推荐

最新文章

热门文章