JQuery系列教材（七）- 常见效果演示

工具版本兼容问题

关键字	简介	示例代码
show hide toggle	显示隐藏切换	示例代码
slideUp slideDown slideToggle	向上滑动向下滑动滑动切换	示例代码
fadeIn fadeOut fadeToggle fadeTo	淡入淡出淡入淡出切换指定淡入程度	示例代码
animate	自定义动画效果	示例代码
callback	回调函数	示例代码

示例 1 : 显示隐藏切换
示例 2 : 向上滑动向下滑动滑动切换
示例 3 : 淡入淡出淡入淡出切换指定淡入程度
示例 4 : 自定义动画效果
示例 5 : 回调函数

示例 1 :

显示隐藏切换

edit 顶折

纠问

显示隐藏切换分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000)

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.hide();
   });
   $("#b2").click(function(){
      div.show();
   });
   $("#b3").click(function(){
      div.toggle();
   });
   $("#b4").click(function(){
      div.show(1000);
   });
   $("#b5").click(function(){
      div.hide(1000);
   });
   $("#b6").click(function(){
      div.toggle(1000);
   });
 
});
  
</script>
  
<style>
button{
  display:block;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>

<button id="b1">立即隐藏</button> 
<button id="b2">立即显示</button>
<button id="b3">立即切换</button>

<button id="b4">延时显示</button>
<button id="b5">延时隐藏</button>
<button id="b6">延时切换</button>

<br>
<br>
  
<div id="d">
用于演示效果的DIV
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

向上滑动向下滑动滑动切换

edit 顶折

纠问

向上滑动向下滑动滑动切换分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000)

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.slideUp();
   });
   $("#b2").click(function(){
      div.slideDown();
   });
   $("#b3").click(function(){
      div.slideToggle();
   });
   $("#b4").click(function(){
      div.slideUp(2000);
   });
   $("#b5").click(function(){
      div.slideDown(2000);
   });
   $("#b6").click(function(){
      div.slideToggle(2000);
   });
  
});
   
</script>
   
<style>
button{
  display:block;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
  
<button id="b1">向上滑动</button>
<button id="b2">向下滑动</button>
<button id="b3">滑动切换</button>
 
<button id="b4">延时向上滑动</button>
<button id="b5">延时向下滑动</button>
<button id="b6">延时滑动切换</button>
 
<br>
<br>
   
<div id="d">
用于演示效果的DIV
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

淡入淡出淡入淡出切换指定淡入程度

edit 顶折

纠问

淡入淡出淡入淡出切换指定淡入程度分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.fadeIn();
   });
   $("#b2").click(function(){
      div.fadeOut();
   });
   $("#b3").click(function(){
      div.fadeToggle();
   });
   $("#b4").click(function(){
      div.fadeIn(2000);
   });
   $("#b5").click(function(){
      div.fadeOut(2000);
   });
   $("#b6").click(function(){
      div.fadeToggle(2000);
   });

   $("#b7").click(function(){
      $("#d1").fadeTo("slow",0.2);
      $("#d2").fadeTo("slow",0.5);
      $("#d3").fadeTo("slow",0.8);
   });
  
});
   
</script>
   
<style>
button{
  display:block;
}
table div{
    border:solid px gray;
  background-color:pink;
  width:80px;
  height:50px;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
<button id="b2">淡出</button>  
<button id="b1">淡入</button>
<button id="b3">淡入淡出切换</button>
<button id="b5">延时淡出</button> 
<button id="b4">延时淡入</button>
<button id="b6">延时淡入淡出切换</button>

<button id="b7">fadeTo</button>

<br>
<br>
   
<div id="d">
用于演示效果的DIV
</div>

<table>
<tr>
   <td>
      <div id="d1">
       用于演示fadeTo 20%
      </div>
   </td>
   <td>
     <div id="d2">
       用于演示fadeTo 50%
     </div>   
   </td>

   <td>
     <div id="d3">
      用于演示fadeTo 80%
     </div>   
   </td>

</tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

$("#b7").click(function(){
      $("#d1").fadeTo("slow",0.2);
      $("#d2").fadeTo("slow",0.5);
      $("#d3").fadeTo("slow",0.8);
   });
  
});
   
</script>
   
<style>
button{
  display:block;
}
table div{
    border:solid px gray;
  background-color:pink;
  width:80px;
  height:50px;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
<button id="b2">淡出</button>  
<button id="b1">淡入</button>
<button id="b3">淡入淡出切换</button>
<button id="b5">延时淡出</button> 
<button id="b4">延时淡入</button>
<button id="b6">延时淡入淡出切换</button>

<button id="b7">fadeTo</button>

<br>
<br>
   
<div id="d">
用于演示效果的DIV
</div>

<table>
<tr>
   <td>
      <div id="d1">
       用于演示fadeTo 20%
      </div>
   </td>
   <td>
     <div id="d2">
       用于演示fadeTo 50%
     </div>   
   </td>

<td>
     <div id="d3">
      用于演示fadeTo 80%
     </div>   
   </td>

</tr>

</table>

渲染中渲染完成

效果

示例 4 :

自定义动画效果

edit 顶折

纠问

通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注：默认情况下，html中的元素都是固定，并且无法改变的位置的。为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000);
   });
});
   
</script>
   
<style>
button{
  display:block;
}

div{
  background-color:pink;
  width:200px;
  height:80px;
  font-size:12px;
  position:relative;
}
</style>
  
<button id="b1">自定义动画</button>

<br>
<br>
   
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

回调函数

edit 顶折

纠问

效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
     alert("动画演示结束");
    });
   });
});
   
</script>
   
<style>
button{
  display:block;
}

div{
  background-color:pink;
  width:200px;
  height:80px;
  font-size:12px;
  position:relative;
}
</style>
  
<button id="b1">自定义动画结束时，会有提示框</button>

<br>
<br>
   
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

JQuery系列教材（六）- 对属性操作以及prop和attr的区别

JQuery系列教材（八）- 事件

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2020-04-10 为啥我的延时显示不起作用嘞

我q146

关于前端部分-JQuery-效果的提问

<script type="text/javascript" src="qwe.js" ></script>
		<script>
		$(function(){
			$("#1").click(function(){
				$("div").toggle(1000);
			});
		});
		</script>
		<button id = "1">延时</button>
		<div id = "div">div</div>
		<style>
			div{
				  border:solid 1px gray;
				  background-color:pink;
				  width:300px;
				  height:100px;
			}
		</style>

3 个答案

小原
答案时间：2020-06-08

代码确实是没问题,jq导入错了

gugubird
答案时间：2020-06-07

代码没问题啊，估计js导错了

我q146
答案时间：2020-04-10

加了"#div"也是唰的一下就没了

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-10-13 不理解

_Joy	关于前端部分-JQuery-效果的提问向右移动100px为啥是left:100px;??

4 个答案

码不码烦
答案时间：2018-12-27

你把代码改成right，bottom试下就明白了。这个不是指容器的移动方向，而是容器在指定方向上的边框到外容器的左或上边框的距离

JesseStutler
答案时间：2018-12-15

就是改css

TZMMichael
答案时间：2018-11-29

可以理解成：距离左边100像素

kaibin
答案时间：2018-10-17

指的从left:0这个位置到left:100这个位置，看起来就像往右移动一样

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-02-25 我把匿名函数提取出来了，按下按键后，动画还没开始就直接执行函数的呢。。。

GGGISGGG

关于前端部分-JQuery-效果的提问

//我把匿名函数提取出来了，按下按键后，动画还没开始就直接执行函数的呢。

        <script src="http://how2j.cn/study/jquery.min.js"></script>
  
<script>
//我把匿名函数提取出来了，按下按键后，动画还没开始就直接执行函数的呢。
   function callback(){
     alert("动画演示结束");
    }
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000, callback());
   });
});
   

</script>
   
<style>
button{
  display:block;
}

div{
  background-color:pink;
  width:200px;
  height:80px;
  font-size:12px;
  position:relative;
}
</style>
  
<button id="b1">自定义动画结束时，会有提示框</button>

<br>
<br>
   
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>

3 个答案

TZMMichael
答案时间：2018-11-29

传入的回调函数是带执行的，也就是说如果你传入了callback() 就是callback()() 了

GGGISGGG
答案时间：2018-02-25

哦！只要把callback()去掉就可以了！到底是为什么呢？

代码超过 5行，点击查看

GGGISGGG
答案时间：2018-02-25

示例5的回调函数。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-09-15 站长移动的例子只有第一次有效,后来再点击按钮得不到预期的效果了呢

好好学天天上

关于前端部分-JQuery-效果的提问

如题

5 个答案

Yui2333
答案时间：2020-07-08

我自己异想天开的写了一行（第十行）达到了你说的效果，但是我也不知道原理....

代码超过 5行，点击查看

icoffee
答案时间：2019-04-18

使用相对值的方法可以实现你想要的功能

yuhan
答案时间：2018-11-06

用定时器就可以，每次动画前先停止前面的动画，因为jquery中的动画是会进行排队的

捕时人
答案时间：2018-06-19

因为动画演示结束后，div块并没有回到最开始的状态（也就是在style标签里设置的状态）

像水一样吧
答案时间：2017-10-20

刷新一下页面就好了

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-06-21 fadeTo透明度可以放时间进去吗

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 1 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-JQuery-效果的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图

显示 隐藏 切换

向上滑动 向下滑动 滑动切换

淡入 淡出 淡入淡出切换 指定淡入程度

自定义动画效果

回调函数

显示隐藏切换

向上滑动向下滑动滑动切换

淡入淡出淡入淡出切换指定淡入程度