how2j.cn

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

示例 1 :

显示 隐藏 切换

显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数,表示延时操作,比如show(2000)
运行效果
<script src="http://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 :

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

向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数,表示延时操作,比如slideUp(2000)
运行效果
<script src="http://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 :

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

淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数,表示延时操作,比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入,1表示全部淡入
运行效果
<script src="http://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

自定义动画效果

通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注: 默认情况下,html中的元素都是固定,并且无法改变的位置的。 为了使用animate()自定义动画效果,需要通过css把元素的position设置为relative、absolute或者fixed
运行效果
<script src="http://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 :

回调函数

效果一般需要一定的时间,并且这个时间可长可短,所以就无法精确的确定该效果合适结束。
好在,效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function,当效果结束的时候,就会自动调用该function了。
运行效果
<script src="http://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


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



//我把匿名函数提取出来了,按下按键后,动画还没开始就直接执行函数的呢。
        <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>

							


2 个答案

GGGISGGG 答案时间:2018-02-25
哦!只要把callback()去掉就可以了!到底是为什么呢?

GGGISGGG 答案时间:2018-02-25
示例5的回调函数。




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





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




1 个答案

像水一样吧 答案时间:2017-10-20
刷新一下页面就好了




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-06-21 fadeTo透明度可以放时间进去吗
2017-03-30 自定义动画效果




提问之前请登陆
关于 前端基础-JQuery-效果 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图