本文介绍: show（）、hide（）、toggle（）、slideDown（）、slideUp（）、slideToggle（）、fadeIn ()、fadeOut ()、fadeToggle ()、fadeTo ()、animate（）、stop（）、finish（）
- 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、综合动画
<body>
<div id="box"></div>
<script>
$("#box").animate({
width:100
},1000,"linear",()=>{
console.log("执行完毕")
})
</script>
</body>3、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博客
原文地址:https://blog.csdn.net/a1598452168YY/article/details/127803115
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_11553.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
