java程序员从笨鸟到菜鸟之_Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验...

本文来自：曹胜欢博客专栏。转载请注明出处：http://blog..net/csh624366188

最近一直感觉自己好忙，每天都浑浑噩噩的过着，转眼间，好像有好长时间没有更新笨鸟到菜鸟了。现在想想，实在罪过了。自从从北京回来就一直投入不了状态，所以也想利用一下这个写博客的机会来促进自己早日投入状态吧。今天我们要讲的是jQuery动画的东西，其实一说到动画，我相信很多人想到的应该是flash吧。其实不然，现在我们将要用jquery来改变flash的一统天下，当然，我们这里所说的动画和flash所做的动画还是有很大的区别的。所以也谈不上他两个产品有什么竞争关系，下面我们就先通过一个简单的实例来看一下jquery的强大吧。

在很多web开发过程中，我们都会用到弹出层的情况，我们再做弹出层的时候大多数都应该用的js实现把。假设有如下需求:

·单击图中的"显示提示文字"按钮,在按钮的下方显示一个弹出

·单击任何空白区域或者弹出层,弹出层消失

用原始JavaScript我们也完全可以完成这个工作.有以下几点注意事项:

1.弹出层的位置需要动态计算.因为触发弹出事件的对象可能出现在页面的任何位置,比如截图中的位置.

2.为document绑定单击是关闭弹出层的函数,要使用多播委托,否则可能冲掉其他人在document绑定的函数.

3.为document绑定了关闭函数后,需要在显示函数中取消事件冒泡,否则弹出层将显示后立刻关闭

·下面我们来看一下用jquery来实现这里的弹出层是怎么实现的：

[html] view

plaincopy

print?

jQuery – 弹出层动画

$(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").show(speed);

});

//单击空白区域隐藏弹出层

$(document).click(function(event) { $("#divPop").hide(speed) });

//单击弹出层则自身隐藏

$("#divPop").click(function(event) { $("#divPop").hide(speed) });

});

弹出层

width: 300px; height: 100px;">

这里是弹出层