jQuery基本动画函数

1. 使用基本动画函数

基本的动画函数主要分为show,hide和toggle三个,都提供了无参数的版本,表示不适用动画切换元素的显示状态:

$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();

提供了两个参数的重载,因为回调函数可以省略,所以可以像开篇实例中使用的, 传入一个数值作为唯一参数,则会在参数规定的时间内用动画效果显示/隐藏元素:

$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");

如果传递了 200, 表示图层会在 200 毫秒内通过渐变的形式显示出来. speed 参数可以使用三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000).

三个函数都可以传入回调函数callback,签名如下:

function callback() {  this; // dom element}

在回调函数中的 this 是执行此函数的 DOM 对象. 会在动画结束时执行。

2. 使用 toggle 函数

toggle函数是功能更强大的函数,可以切换元素的可见状态.我们经常遇到需要使用toggle的情况.比如希望一段文字第一次单击显示弹出层,第二次单击隐藏弹出层.

注意: toggle()这个方法在 jQuery1.8 中宣告过时,在 jQuery1.9 中已经移除;jQuery animation也有一个名为toggle的方法。哪一个被调用取决于传递的参数的设置。

我们将开篇实例稍作修改即可实现这个效果:

<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>jQuery - Start Animation</title>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
   $(document).ready(function() {      //动画速度
     var speed = 500;      //绑定事件处理
     $("#btnShow").click(function(event) {        //取消事件冒泡
       event.stopPropagation();        //设置弹出层位置
       var offset = $(event.target).offset();
       $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });        //切换弹出层的显示状态
       $("#divPop").toggle(speed);
     });      //单击空白区域隐藏弹出层
     $(document).click(function(event) {
       $("#divPop").hide(speed)
     });      //单击弹出层则自身隐藏
     $("#divPop").click(function(event) {
       $("#divPop").hide(speed)
     });
   });  </script></head><body>
 <div>
   <button id="btnShow">Display the text prompt</button>
 </div>
 <!-- 弹出层 -->
 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
   <div style="text-align: center;">pop div</div>
 </div>
</body>
</html>
继续学习
||
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>php中文网 - 领先的 php教程网站</p> <p>在 php中文网,你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html>
提交重置代码