从头开始学习jQuery(7)实现jQuery动画让页面动起来

00-1010本系列文章将带您进入jQuery的奇妙世界，其中有很多作者的具体体验和解决方案。即使可以使用jQuery，也能在阅读中发现一些骗子。开发人员一直在煞费苦心地制作动画。但是有了jQuery，你会瞬间成为别人(不了解jQuery的人)眼中的动画大师！本文将介绍jQuery的动画相关功能。原来动画这么简单！

一.摘要

这个系列文章的例子都是针对某个技术细节，因为我们要学习基础知识。虽然总有人想要更复杂的应用实例，但我觉得还是要先打牢基础。有了坚实的基础，我们将能够凭借每个人的智慧创造更多更好的应用。就在写这篇文章的前几天，不止一个同事担心‘弹出层’效应。不过，看过这篇文章的人，以后面对这个功能都可以开心地笑一笑。jQuery，让工作变得轻松！10-10，在做web程序的时候，经常会用到弹出层，比如点击文字或者按钮显示一个提示文字等。假设以下要求： 。

点击图中的“显示提示文字”按钮，按钮下方会显示一个弹出图层。如果单击任何空白区域或弹出层，弹出层将消失。我们可以用原始的javascript完全完成这项工作。有以下几点需要注意：1。弹出层的位置需要动态计算。因为触发弹出事件的对象可能出现在页面上的任何位置，例如屏幕截图中的位置。2.点击进行文档绑定是关闭弹出层的功能，应该使用组播委托，否则文档绑定的其他人的功能可能会被冲掉。3.绑定文档的关闭功能后，需要取消显示功能中的事件冒泡，否则弹出层显示后会立即关闭。有了jQuery，我们可以轻松实现这个实例3360！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head titlejQuery-Start Animation/title script type=' text/JavaScript ' src='./scripts/jquery-1 . 3 . 2-vsdoc2 . js/' script script type=' text/JavaScript ' $(文档)。ready(function(){//动画速度var speed=500//绑定事件处理$ ('# btnshow ')。click(function(event){//取消事件冒泡事件. stopperpagation()；//设置弹出层位置varoffset=$(事件。目标)。offset()；$('#divPop ')。CSS({ top : offset . top $(event . target))。height() 'px '，left : offset . left })；//动画显示$('#divPop ')。显示(速度)；});//单击空白区域隐藏弹出层$(文档)。单击(函数(事件){$ ('# div pop ')。hide(speed)})；//单击弹出层隐藏$ ('# div pop ')。单击(函数(事件){$ ('# div pop ')。hide(speed)})；});/script/head body div br/br/br/button id=' BTN show '显示提示文本/button /div！-popup layer-div id=' div pop ' style=' background-color : # f0f 0；border:固体1px # 000000绝对位置：display:none宽度： 300 px；' height: 100px'div style=' text-align : center；'弹出层/