原文地址：http://www.ijquery.cn/?p=637 作者：杨红伟 网名：子弹兄 工作室：宏威网站制作部 (http://www.360sites.cn )
一、特效介绍及制作过程
不想听我发牢骚的话，直接下拉到下边看demo或者下载看。想看的话继续看啊……
今天一个朋友让我给他做一个拉幕效果，自己想的网上那么多案例，随便下载一下得了，效果也不错。于是网上找了几个效果，都不是自己想要的效果。因为自己从没有做过，所以就拿下载的那个代码修改了一下，我去那代码乱七八糟的，本来几句，几分钟就实现了，没想到用了一个多甚至两个小时。
原理是这样的：一个图片在打开的时候，下拉幕布，然后停顿几分钟，然后再关闭，然后再下拉出一个小图片。
于是想了一想，需要这几个jquery代码来操作。
一：下拉-slidedown() 二：停顿-delay() 三：缩回-slideup() 四：再下拉-slidedown()
于是自己做了一个demo，部分代码如下：
$("#adBig").slideDown(2000).delay(1000).slideUp(2000,function(){
$("#adSmall").slideDown(1000);
});
于是死活不能运行，弄不懂了，换种方法吧。后来换了各种，比如 JS 的 setTimeout 函数，但是这家伙的语法规则有些变态 setTimeout(code,millisec) ，中间必须加code，但是运行了一下，死活影响后来的 function回调函数的效果了！
TMD，于是各种翻书，把我的书都找遍了，也没有找到这个 delay ，看了一看，我的书也许有些旧了。
于是，在网上找到一篇文章说是 jquery1.4以后才引入了 delay这个参数，于是把jquery-.1.7.2.min.js 加入了，我的那行代码可以运行了！！
所以啊，以下总结：
一：以后自己写代码吧，要用也要用那些有影响力的文章或者代码； 二：delay 是 jquery1.4 才引用的，以后可别用旧的jquery——要用比较新的相关代码； 三：书籍是用来学习基本语法及结构的，一些时尚前沿的内容书籍里是找不到的，百度、谷歌吧……
二、DEMO及下载
HTML代码：
<span id="cb">重播</span> <div id="" > <div id="adBig" style="display: none"> <a href='#'><img title="" src="images/big.jpg" border="0"/></a> </div> <div id="adSmall" style="display: none"> <a href="#"><img src="images/small.gif" border="0"/></a> </div> </div>
JS代码：
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" >
function showImage()
{
$("#adBig").slideDown(2000).delay(1000).slideUp(2000,function(){
$("#adSmall").slideDown(1000);
});
}
$(function(){
//打开时加载图像
showImage() ;
//单击时处理的效果
$("#cb").click(function(){
$("#adSmall").css("display","none");
showImage();
});
});
</script>
扩展：当然呢，如果你不要重播按钮，代码会更简练！总共也没几句，所有代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>杨红伟制作-基于jQuery的拉幕横幅广告效果-不带重播带停顿</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#adBig").slideDown(2000).delay(1000).slideUp(2000,function(){
$("#adSmall").slideDown(1000);
});
});
</script>
</head>
<body>
<div id="adBig" style="display: none">
<a href='#'><img title="" src="images/big.jpg" border="0"></a>
</div>
<div id="adSmall" style="display: none">
<a href="#"><img src="images/small.gif" border="0"/></a>
</div>
</body>
</html>
DEMO： http://www.ijquery.cn/study/demojq/0001/demo2.html
下载： http://www.ijquery.cn/study/demojq/0001/0001.zip 中的demo2.html