先看一下例子吧：DEMO。（请使用Firefox4.0+、Chrome、Safari、Opera10.5+观看）

使用jQuery的方法

DEMO中我使用的是<a>标签，然后用的图片（来自Tutorial9）来制造的按钮。那么渐变的动画效果是怎么样来的呢？我解释一下，一个<a>标签写的链接，在DOM中的结构应该是这样的

<a href=”#”>HOME</a>

如果我们分别为:link和:hover指定不同的背景，那么鼠标悬浮的时候肯定按钮是动不起来的。这时，我们变通一下。用jQuery在<a>里面生成一个span标签作为子元素，为它指定hover状态的背景图片。因为是按钮切换时是渐变状态，所以我们就把span的透明度设置为0，鼠标悬浮上去的时候把span的透明度设置为1，这样就能把a标签本来的背景图片挡住，就实现了DEMO中的效果。变换之后的DOM结构是这样的：

<a href=”#”>
    HOME 
    <span class=”hover”></span>
</a>

然后添加jQuery效果，代码如下，注释都包含在里面了：

$(function(){
	$('a.jsbutton').each(function(){	//遍历所有的需要添加效果的按钮
		//生成span标签，并把它插入到a标签的里，并将生成的span元素的透明度设置为0
		$('<span class="hover"></span>').appendTo(this).css('opacity','0');
		//用span这个变量来保存这个生成的span元素
		var span = $(this).find('span.hover');
		//为当前的a标签绑定hover事件
		$(this).hover(function(){
			//鼠标悬浮时，将生成的span元素的透明度设置为1，用来显示悬浮状态
			span.stop().fadeTo('slow',1);
		},function(){
			//鼠标离开时，将生成的span元素的透明度设置为0，用来显示a链接本来的背景
			span.stop().fadeTo('slow',0);
		});
	});
});

这里再次强调一下stop()方法的作用：

stop( [clearQueue] [, gotoEnd] )

两个参数均为可选，它们都是布尔值

clearQueue表示是否清空未执行完的动画序列

gotoEnd表示是否将正执行的动画跳转到末状态

如果两个参数均不设置，则它会立即停止当前元素的动画。如果动画序列中还有其他的动画，则会以当前状态开始执行接下来的动画

文中用到的方法，就是粗体标出的部分。

CSS3 Transition方法

这是纯的CSS3方法，所以代码是不涉及JS的，虽然比较简单，但效果不如JS，所以如果对视觉性的要求不是很高，用这个也未偿不可。另外，浏览器兼容能力有限，最后效果不能保证。核心代码如下：

.css3 a{
	/*css3 trasition变换，这里指定变换背景*/
	-moz-transition:background 0.4s linear;
	-webkit-transition:background 0.4s linear;
	-o-transition:background 0.4s linear;
}
.css3_a a:hover{
	opacity:0.75;
	/*css3 trasition变换，这里指定变换透明度*/
	-moz-transition:opacity 0.6s linear;
	-webkit-transition:opacity 0.6s linear;
	-o-transition:opacity 0.6s linear;
}

具体的CSS3的trasition方法，我就不介绍了，有兴趣的朋友们去看看W3C的那页（目前我没兴趣，收着暂时没看=_=）。

相关阅读

• GM脚本：Simple Google Reader Style V1.31
• jQuery中处理动画序列引起的问题
• JavaScript中的this到底是什么
• 用jQuery创建简单的滑动导航菜单
• GM脚本：Simple Google Reader Style V1.3
• 使用CSS美化文件上传表单
• box-shadow用法简介
• 用CSS3创建漂亮的链接提示
• 如何在一堆框架（Frame）上弹出div层
• とあるcnbeta的脚本

© ZH CEXO for ZH CEXO's BLOG, 2011. | 查看原文 | 4 条评论
标签: javascript, jQuery, 学习

$(document).ready(function(){
    $('#panel').css('opacity','0.5');
        $('#panel').click(function(){
            $(this).animate({
                left:'500px',
                height:'200px',
                opacity:'1'
            },3000).animate({
                top:'200px',
                width:'200px'
            },3000).css('border','5px solid blue');
        });
    });
});

代码先将#panel这个元素的透明度设置为0.5，之后元素会先向右移动500px、高度变为200px、透明度变为1，再然后元素会在第一段动画完成后，向下移动200px，并且高度变为200px。这两段动画其实就组成了一个动画序列，先执行第一段，然后执行第二段。

不过有时候，这种有动画序列却会引起一些问题，比如我想用jQuery中的slideDown()和slideUp()来制作有滑动效果的下拉菜单：鼠标悬浮于导航的时候菜单滑下，鼠标离开的时候菜单滑上，可是如果不作任何处理，把鼠标快速地在几个导航上快速滑入滑出，菜单节奏就会乱掉，上上下下像在跳舞一下：

DEMO 1

解决方法一：使用jQuery带的stop()方法

jQuery自带的stop()方法的描述是这样的

stop( [clearQueue] [, gotoEnd] )

两个参数均为可选，它们都是布尔值

clearQueue表示是否清空未执行完的动画序列

gotoEnd表示是否将正执行的动画跳转到末状态

如果两个参数均不设置，则它会立即停止当前元素的动画。如果动画序列中还有其他的动画，则会以当前状态开始执行接下来的动画

那么想想这个菜单的实际情况：鼠标移入的时候，实际它就会在动画序列里添加一个slideDown动画，然后在鼠标移出的时候再添加一个slideUp动画。因为动画是按顺序执行的，所以第二个动画非得等到第一个动画执行完毕了以后再执行。如果鼠标移入移出的速度过快，动画就会慢慢按序列里的顺序执行直到完毕，所以就会出现DEMO1中的效果。那么用stop()的方法来清空序列不就行了？是的，所以把stop()方法的第一个参数设置为true。

那第二个值呢？我们想想，我们的目标是把菜单完全展示于用户的面前，并且slideUp动画是需要基于之前slideDown的状态来完成的，你slideDown把菜单的整个高度都显示出来了，slideUp才好把菜单隐藏掉。另外还需要注意的一点是，slideUp和slideDown动画未执行完的时候，会把过程中的临时变量记录到DOM中，也就是说，如果你指定第二个参数为false，那么比如菜单高度有100px，但因为鼠标移出提前结束了，只展开了10px，那么菜单的高度就是10px并且被记录在DOM中了。再次使用slideDown的话，它就会以10px为基础展开，显然菜单并不会完整地展示于用户有面前。所以把第二个参数也设置为true，让它让元素动画直接跳转到末状态。

DEMO 2

大家可以把鼠标快速地在导航上滑入滑出试试看，虽然动画没有什么问题，但是能明显看到，如果在菜单展开的过程中移出了鼠标，菜单会立刻全部展开到末状态，而不是慢慢展开。关键代码如下

$(document).ready(function(){
    $('#menu > li').hover(function(){
        //这里的stop(true,true)指的是让动画队列清空，并且让已经在进行动画的元素到达动画的末状态，方便在第二次动画中使用
        $(this).find('ul').eq(0).stop(true,true).slideDown('slow');
    },function(){
        $(this).find('ul').eq(0).stop(true,true).slideUp('slow');
    });
});

解决方法二：使用setTimeout来判断鼠标悬停的时间

这种方法是mg12提出来的，感觉比第一种方法更好，菜单滑动的时候不突兀。关键代码如下：

$(document).ready(function(){
    //设定两个数组，分别对应在不同元素上鼠标滑入和滑出要触发的函数
    //鼠标滑入的数组
    var mouseover_tid = [];
    //鼠标滑出的数组
    var mouseout_tid = [];
    //使用each()方法，index为此方法自动传入的参数，记录匹配元素在元素集合中的所处位置
    $('#menu > li').each(function(index){
        $(this).hover(function(){
            //this为当前的li元素，这里赋给self变量，方便在setTimeout方法中引用
            var self = this;
            //先清除鼠标滑出时的slideUp方法
            clearTimeout(mouseout_tid[index]);
            //鼠标滑入时，把当前的鼠标滑放的方法记录到数组中，并判断鼠标停留的时间是否符合条件
            mouseover_tid[index] = setTimeout(function(){
                //如果这里不用self而用this，this指向的就不是当前的li这个DOM元素
                $(self).find('ul').eq(0).slideDown('slow');
            },150);
        },function(){
            //鼠标滑出时的说明与滑入时的说明相似，此处省略
            var self = this;
            clearTimeout(mouseover_tid[index]);
            mouseout_tid[index] = setTimeout(function(){
                $(self).find('ul').eq(0).slideUp('slow');
            },150);
        });
    });
});

DEMO 3

代码的关键位置我已经注释清楚了，你也可以去mg12的那篇文章里看看。与第一种方法的区别在于，由于没使用stop()方法，所以你不会看到很突兀的鼠标一移开，菜单马上全展开的时候的效果。

结语

这里只是用slideDown和slideUp举的例子，方法也可以适用于其他的情况，比如fadeIn和fadeOut、animate等。目前只介绍这两种方法，以后想到了再补充，另外，如果大家有更好的意见，欢迎反馈。

相关阅读

• 用jQuery或者CSS3创建简单的动态按钮
• 用jQuery创建简单的滑动导航菜单
• GM脚本：Simple Google Reader Style V1.31
• GM脚本：Simple Google Reader Style V1.3
• 使用CSS美化文件上传表单
• box-shadow用法简介
• 用CSS3创建漂亮的链接提示
• とあるcnbeta的脚本
• 使用JavaScript对象属性防止变量被影响
• 这回整优酷了，脚本脚本

© ZH CEXO for ZH CEXO's BLOG, 2011. | 查看原文 | 2 条评论
标签: jQuery, 学习

js方面的代码肯定是没问题的，问题出CSS上，Colortip用的是position进行定位，在IE6下面可能存在着一点问题。而且由于IE6不支持border-color:transparent的属性，所以tip下面的三角形也有问题。下面修正它吧。

打开插件的colortip-1.0-jquery.css这个文件，在里面找到如下代码：

.pointyTip,.pointyTipShadow{
	/* Setting a thick transparent border on a 0x0 div to create a triangle */
	border:6px solid transparent;
	_border:6px solid #123456; /*指定一个特别的颜色值，为使用chroma滤镜作准备*/
	bottom:-12px;
	height:0;
	left:50%;
	margin-left:-6px;
	position:absolute;
	width:0;
	font-size:0; /*IE下空标签会有一个高度，把font-size设为0可以清除这个高度*/
	_filter:chroma(color=#123456); /*为IE6使用chroma滤镜将颜色#123456过滤成透明的*/
}

如果大家自行看一下代码的话，可能会发现我贴出来的代码和原来相比有点不同，但是我已经把注释写在里面了，应该可以理解吧。 下面继续：

.pointyTipShadow{
	/* The shadow tip is 1px larger, so it acts as a border to the tip */
	border-width:7px;
	bottom:-14px;
	_bottom:-15px; /*将小三角形的位置微调一下更准确*/
	margin-left:-7px;
}

.colorTipContainer{
	position:relative;
	text-decoration:none !important;
	_zoom:1; /*不知道为什么，这里加上zoom:1后IE6下使用left:50%才能得到正确的位置，难道内联的元素没有layout？无法准确表达……*/
}

好了，到这里就修正完毕了，在我的机器上，用IEtester和VMware虚拟机的XP+IE6都测试通过，你也可以试试效果。有任何问题可以向我反馈，我能改则改。代码好理解，不能理解的直接用插件就行了。

插件网站 | 原版DEMO | 改后DEMO | 修正后的插件下载

再补充一句，原版和改后的DEMO在高级浏览器里面的效果是一样的，没区别，但是用IE6试试就知道了。希望我做的这一点点微不足道的工作，为喜欢这款插件的朋友们带来方便，^_^

关于纯CSS的方法实现三角形的效果，可以参看Mr.Think的这篇文章，很详细很不错的技巧CSS技巧之圆角背景与三角形。

相关阅读

• 更换Firefox默认查看源代码工具的配色方案
• 推荐截屏软件Lightscreen
• 发布软件包镜像
• 当小白，亲自体验Windows 7
• 漂亮的3D桌面
• GM脚本：Simple Google Reader Style V1.3
• 用jQuery或者CSS3创建简单的动态按钮
• jQuery中处理动画序列引起的问题
• とあるcnbeta的脚本
• 这回整优酷了，脚本脚本

© ZH CEXO for ZH CEXO's BLOG, 2010. | 查看原文 | 6 条评论
标签: jQuery, Toolkit, 下载

这个新主题8月1日上线的，和之前的主题不同，这个主题比较简洁，没什么太花哨的元素，这样的话，正在学习js的我，折腾起来手感可能会好一点。一直以为js是个麻烦的东西，好难学会，但自己静下心来看了会书，感觉也没那么复杂，当然啦，想学得深入肯定是不简单的。不过书上介绍，学习js的过程中，最好学习另外一门编程语言，形成良好的编程观念和习惯，推荐学习C或者Java，这个我暂没兴趣-,-。下面是近期整改的内容：

链接上的气泡提示

近期来看过博客的朋友们应该知道，我全站的链接上，用鼠标悬浮的时候都会出现黑色半透明的气泡提示。本来这种效果在别人的博客上也都见过了，而且别人的博客上有提示里面还带有链接，而我的没有。要做出链接其实也不麻烦，只不过我做这个提示的作用是，想让a标签里面的title属性快点显示，那么有的a标签里面没有title属性，本来我定义的是“点击访问”这个汉字，但netputer小盆友提出，如果没有title属性就别显示了，结果我就按照他的意思修改了一下。

鼠标悬浮显示@reply的评论

这个我已经专门写了一篇文章了，介绍得很清楚，有兴趣的同学自己去看看。当然我也收到意见说嵌套可能会更好，其实我也觉得嵌套更好，不然WordPress不会原生支持它，但出于习惯的考虑，我还是使用了@reply方式，并使用这种鼠标悬浮显示评论的方法提高用户体验，希望大家喜欢。

内容专注模式

我不知道到底有多少人喜欢对着屏幕来看文章，又有多少人真正认真去看别人写的文章，一般如果文章是我很感兴趣的话题，我会仔细地看完。但是如果有人在我的博客上认真看文章的话，可能时间一长眼睛会不舒服，因为新主题和旧主题比起来背景太白了，并且我的文章一般都不算短吧……（汗！）我之前有介绍过Safari 5推出的阅读模式，受它的启发，我就在文章页的导航前面加上了“内容专注模式”，将背景用黑幕遮起来，希望大家阅读的时候眼睛能好受一点，当然也是希望大家能认真读我写的东西啦（笑）。这个功能本质上和有些博客上的“关闭侧边栏”没什么太大区别，但我只是想换一种方式实现类似功能，不太想千篇一律。

上面的图中能找出点什么信息来么？呵呵，希望你能知道，那也许是我下篇文章要写的内容。

相关阅读

• 开学了，闲聊+扯淡
• 用jQuery或者CSS3创建简单的动态按钮
• jQuery中处理动画序列引起的问题
• 从明天起，做一个XX的人
• 从Beta到Alpha
• 收到了RJ童鞋精心制作的2011年台历
• 修正一下jQuery插件Colortip在IE6下面的显示问题
• 鼠标悬浮显示@reply的评论
• 先上新主题，再慢慢完善
• WordPress子主题（翻译）

© ZH CEXO for ZH CEXO's BLOG, 2010. | 查看原文 | 32 条评论
标签: jQuery, 主题, 胡说八道

一直使用@reply的方式来进行评论，什么是@reply呢？就是从以前的主题到现在，在每条评论的右边都会有Reply按钮，点击一下，评论框里面就会显示“@user:”然后写下你的留言，这样就很容易知道你在回复谁的评论了，而且因为我使用了Mail to commenter这个插件，被回复者会收到邮件提醒，至于@reply这个名字，可能是从Twitter上延用过来的吧。有人说，用嵌套的话，谁回复谁不是很容易看出来么，话是这么说没错，但嵌套的样式不好控制，也不知道套多少层合适，另外，如果上层的嵌套太多了，可能会影响别人看后面评论的心情吧，当然如果你不怕折腾，试试木木同学的无限嵌套。打住，我这篇文章要说什么问题呢？先上个图吧：

这样总该明白了吧。本来留言的时候点击Reply按钮后会自动生成被回复评论的锚记，可以点击这个锚记跳转到被回复的评论那里，但体验总有点不好。而鼠标悬浮于锚记上自动出现被回复的评论，最初是出现在shawn大师的博客上，后来Yinheli同学也按自己的方法钻研出来了。不过yinheli同学的代码感觉和他自己的主题结合着，不太适合我，改了半天老出不来效果，所以我就试着自己用jQuery折腾一下看看。

先打开Firebug分析一下DOM，我们就以图中的这个回复评论为例。因为我的评论没有分页，所以回复的评论都在本页里面，并且@user这个链接里面的href值是以“#comment-”开头的，另外要注意的是，每个评论的li都拥有一个id，这个id的值也就是href里面的值，比如上图中的href和id都是comment-2742。好了，我们现在要做的就是把href里面的链接取出来，然后取相同值的id的li，并且把这个li元素克隆一下，追加到DOM里面，再配合CSS的absolute定位，让你的评论能显示在鼠标的旁边。

下面上代码，注释我都写在后面，希望大家都理解。

jQuery代码：

//hover show comments
	$(".commentlist li p a").mouseover(function(e){		//鼠标悬浮在评论中有a标签的地方时
		var A=/^#comment-/;		/*正则表达式，用来筛选以#comment-的元素*/
		if ($(".commentlist li p a").attr("href").match(A)) 	//如果a里面的href里面的值与正则表达式里的相匹配，那么执行花括号里面的代码块
		{
			var t_link = $(this).attr("href");		//定义t_link来存储href里面的值
			var h_com = "<li class='hover-comment'>" + $(t_link).html() + "</li>";		//定义h_com，在里面赋上html代码
		} else h_com = "";
		$("body").append(h_com);	//将h_com里面的值追加到body里面
		$(".hover-comment").css({
			"top":(e.pageY+10) + "px",
			"left":(e.pageX+10) + "px"
		}).fadeIn("slow");		//让评论在鼠标悬浮于@user链接里面出现
	}).mouseout(function(){
		$(".hover-comment").fadeOut("slow",function(){$(this).remove()});		//鼠标移出链接时，将添加到body里面的h_com删掉
	}).mousemove(function(e){		//鼠标在@user上移动的时候，让显示出来的评论框也跟着移动
			$("#linktip").remove();
			$(".hover-comment").css({
			"top":(e.pageY+10) + "px",
			"left":(e.pageX+10) + "px"
		});
	});

CSS代码：

.hover-comment{
	position:absolute;		/*绝对定位，让悬浮的评论脱离文档流，方便出现在鼠标旁边*/
	width:580px;
	border:1px solid #7DA028;
	list-style:none;
	display:none;		/*添加到body中后，让它不显示，然后在js里以fadeIn的方式显示*/
	background:#FFF;
}

不知道大家能不能理解呢？另外有一个问题就是，我以前换主机的时候，数据库处理上出了问题，所以有的评论对不上，这样的话鼠标悬浮的时候就会出现null，怎么解决呢？希望知道的朋友提供个方法，谢谢！

参考阅读：

1. 鼠标悬浮实现显示留言内容(上)

2. 鼠标悬浮实现显示留言内容(下)

相关阅读

• 用jQuery创建简单的滑动导航菜单
• 利用CSS和jQuery创建一个屏幕键盘
• youlove.us上的背景滚动效果是怎样实现的（翻译）
• 使用jQuery创建滑动图片/显示内容的效果（翻译）
• 使用jQuery制作精致的复选框（翻译）
• 使用CSS美化文件上传表单
• 用jQuery或者CSS3创建简单的动态按钮
• jQuery中处理动画序列引起的问题
• 用CSS3创建漂亮的链接提示
• 修正一下jQuery插件Colortip在IE6下面的显示问题

© ZH CEXO for ZH CEXO's BLOG, 2010. | 查看原文 | 16 条评论
标签: jQuery, wordpress, 教程

不好意思，我才发现我以前的文章都写得太长了，读起来很累，尽管自我感觉写得还不错的说……以后技术类文章我尽量写得简明易懂，免得在阅读上花费太多读者的时间。

鄙人一直想学js，但无从下手，水平不够，看书也静不下心来，毕业事又多，还欠了一屁股债没还。考虑了半天，从网上买了本《锋利的jQuery》，好像不少人也推荐过这本书。我觉得这本书写得还不错，很简单易懂，虽然我没看多少……书中的第一章为了向读者表明一下jQuery的链式操作风格，写出了一段导航代码，效果是单击不同的章节名称链接，显示相应的内容，同时高亮显示当前选择的章节。代码很简单，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-5-1</title>
<style type="text/css">
#menu {
	width:300px;
}
.has_children{
	background : #555;
	color :#fff;
	cursor:pointer;
}
.highlight{
	color : #fff;
	background : green;
}
div{
	padding:0;
}
div a{
	background : #888;
	display : none;
	float:left;
	width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	$(".has_children").click(function(){
		$(this).addClass("highlight")			//为当前元素增加highlight类
			.children("a").show().end()			//将子节点的a元素显示出来并重新定位到上次操作的元素
		.siblings().removeClass("highlight")		//获取元素的兄弟元素，并去掉他们的highlight类
			.children("a").hide();				//将兄弟元素下的a元素隐藏
	});
});
</script>
</head>
<body>
<div id="menu">
	<div class="has_children">
		<span>第1章-认识jQuery</span>
		<a>1.1-JavaScript和JavaScript库</a>
		<a>1.2-加入jQuery</a>
		<a>1.3-编写简单jQuery代码</a>
		<a>1.4-jQuery对象和DOM对象</a>
		<a>1.5-解决jQuery和其它库的冲突</a>
		<a>1.6-jQuery开发工具和插件</a>
		<a>1.7-小结</a>
	</div>
	<div class="has_children">
		<span>第2章-jQuery选择器</span>
		<a>2.1-jQuery选择器是什么</a>
		<a>2.2-jQuery选择器的优势</a>
		<a>2.3-jQuery选择器</a>
		<a>2.4-应用jQuery改写示例</a>
		<a>2.5-选择器中的一些注意事项</a>
		<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
		<a>2.7-还有其它选择器么？</a>
		<a>2.8-小结</a>
	</div>
	<div class="has_children">
		<span>第3章-jQuery中的DOM操作</span>
		<a>3.1-DOM操作的分类</a>
		<a>3.2-jQuery中的DOM操作</a>
		<a>3.3-案例研究——某网站超链接和图片提示效果</a>
		<a>3.4-小结</a>
	</div>
</div>
</body>
</html>

DEMO 1

我觉得这和网上常见的滑动效果很相近，只是没有滑动的动态而已，那么我们可不可以改成更加平滑呢？而且在单击每一项的标题时，其他已经展开了子内容的标题都会被关上，能不能让它点一下标题就展开，再点一下就关上，并且各大标题之间相互没有干扰呢？折腾试试看！

在点击了章节名称（span）后，其他的章节里面的子元素都会被隐藏，起作用的代码是

.children("a").hide()

那我们直接把它去掉不就行了？那么就先去掉试试。嗯，去掉之后的确可以做到点击章节标题展开代码的效果，但是还有个问题，展开后的章节标题你再点它没有任何反应，展开的栏目收不回来了，怎么办？那是因为代码里面只用了show()这个函数，当然没法收回啦，把show()函数换成slideToggle()就可以了，动画速度不够快？加上参数就可以，代码是

sildeToggle(“fast”)

DEMO 2

到此为止，看上去还比较完美，但你注意到没，点击章节标题下面的小标题链接，它也会把展开的章节收起来！一般人是不会想要这种效果的吧。原因出在什么地方呢？就是这一句

$(".has_children").click(function(){

这一句表明含有 class=”has_children” 的整个元素（代码中是div）都是可点的，你的a元素也是处于这个div里面，它当然也是可点的嘛。怎么解决这个问题呢？一步步来想

1、我们只需要让标题可点，所以应该让jQuery找到的元素是span，而不是整个<div class=”has_children”>

2、需要展开的是div里面包含的a元素，而不是别的元素，所以sildeToggle的对象是a

按这样来改的话，我们就可以使用下面的代码：

//等待DOM元素加载完毕
$(document).ready(function(){
	$(".has_children span").click(function(){
//为span增加点击事件
		$(this).parent().addClass("highlight")
//为当前span的父元素增加高亮，也就是当前的div.has_children
		.children("a").slideToggle("fast").end()
//将子节点的a元素显示或收缩，并重新定位为上次操作的元素，即div.has_children
		.siblings().removeClass("highlight");
//将兄弟元素（即其他的div.has_children）的高亮属性去掉
	});
});

可是这样改了还存在一个问题，大家发现了没，你只有点击章节标题的文字才能执行展开收缩的效果，也就是说，可点击区域仅限于文字，文字旁边的深色空白就浪费了不说，如果字很小，不好点击，用户体验变差了。这个问题就交给俺们的CSS吧

.has_children span{display:block;width:300px;}

让span标签以block的形式展示，可点击区域就变大了。

DEMO 3

可以再按照你的喜好，把字体配色什么的都换掉，我的代码就是换了字体和高亮的颜色，还折腾了一点点CSS3的文字阴影效果。

完整的代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-5-1</title>
	<style type="text/css">
	body{font-family:"微软雅黑", Arial;}
	#menu{width:300px;margin:0 auto;}
	.has_children{background:#555;color:#FFF;cursor:pointer;text-shadow:1px 0 1px #000;}
	.has_children span{display:block;width:300px;}
	.highlight{color:#FFF;background:#555;}
	div{padding:0;}
	div a{background:#888;display:none;float:left;width:300px;text-shadow:1px 0 1px #333;}
	</style>
</head>
<body>
	<div id="menu">
		<div class="has_children">
			<span>第1章 - 认识</span>
			<a>1.1 - Javascript和Javascript库</a>
			<a>1.2 - 加入jQuery</a>
			<a>1.3 - 编写简单jQuery代码</a>
			<a>1.4 - jQuery对象和DOM对象</a>
			<a>1.5 - 解决jQuery和其他库的冲突</a>
			<a>1.6 - jQuery开发工具和插件</a>
			<a>1.7 - 小结</a>
		</div>
		<div class="has_children">
			<span>第2章 - jQuery选择器</span>
			<a>2.1 - jQuery选择器是什么</a>
			<a>2.2 - jQuery选择器的优势</a>
			<a>2.3 - jQuery选择器</a>
			<a>2.4 - 应用jQuery改写示例</a>
			<a>2.5 - 选择器中的一些注意事项</a>
			<a>2.6 - 案例研究——类似淘宝网品牌列表的效果</a>
			<a>2.7 - 还有其他选择器么？</a>
			<a>2.8 - 小结</a>
		</div>
		<div class="has_children">
			<span>第3章 - jQuery中的DOM操作</span>
			<a>3.1 - DOM操作的分类</a>
			<a>3.2 - jQuery中的DOM操作</a>
			<a>3.3 - 案例研究——某网站超链接和图片提示效果</a>
			<a>3.4 - 小结</a>
		</div>
	</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
//等待DOM元素加载完毕
$(document).ready(function(){
	$(".has_children span").click(function(){
//为span增加点击事件
		$(this).parent().addClass("highlight")
//为当前span的父元素增加高亮，也就是当前的div.has_children
		.children("a").slideToggle("fast").end()
//将子节点的a元素显示或收缩，并重新定位为上次操作的元素，即div.has_children
		.siblings().removeClass("highlight");
//将兄弟元素（即其他的div.has_children）的高亮属性去掉
	});
});
</script>
</html>

本文只是我读书的时候发出的一点点思考，然后按自己的想法折腾了一下。有的博客的侧边栏的项目就可以收缩和展开，不妨用这种方法试试？

已知的问题

书中的代码没有问题，在主流浏览器下运行正常，我改后的代码在IE6下就有小bug了，求解。

相关阅读

• 使用CSS美化文件上传表单
• 用jQuery或者CSS3创建简单的动态按钮
• jQuery中处理动画序列引起的问题
• 用CSS3创建漂亮的链接提示
• 我能想到的圆角背景的实现方法
• 鼠标悬浮显示@reply的评论
• 利用CSS和jQuery创建一个屏幕键盘
• youlove.us上的背景滚动效果是怎样实现的（翻译）
• 使用jQuery创建滑动图片/显示内容的效果（翻译）
• 使用jQuery制作精致的复选框（翻译）

© ZH CEXO for ZH CEXO's BLOG, 2010. | 查看原文 | 8 条评论
标签: jQuery, 学习, 教程

源文件 | DEMO演示

第一步：基本的HTML和所需的文件

制作这个键盘需要大量的HTML代码，然后用CSS设置外观。每一个键都将使用li标签包围，再把它们置入一个ul无序列表标签中，而每个li元素也将拥有一个class属性，便于在CSS和jQuery中使用。一般的类属性都是“letter”、“lastitem”等，以便于我们容易找到想要的那个li。首先在你想要的地方创建一个新的文件夹，在这个新文件夹里创建一个index.html文件，再创建css和js两个空文件夹。最后，在css文件夹里创建style.css文件，在js文件夹里面创建keyboard.js文件。

在这个HTML文件里，我们要调用两个js文件和一个css文件，在body标签的里面，将写上大量的包含字母、数字和功能键的li元素，还包括一个id为keyboard的文本域（textarea）元素，用来显示键盘上“打”出来的字符。下面列出index.html文件中的所有代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Online Keyboard</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="container">
	<textarea id="write" rows="6" cols="60"></textarea>
	<ul id="keyboard">
		<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
		<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
		<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
		<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
		<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
		<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
		<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
		<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
		<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
		<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
		<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
		<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
		<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
		<li class="delete lastitem">delete</li>
		<li class="tab">tab</li>
		<li class="letter">q</li>
		<li class="letter">w</li>
		<li class="letter">e</li>
		<li class="letter">r</li>
		<li class="letter">t</li>
		<li class="letter">y</li>
		<li class="letter">u</li>
		<li class="letter">i</li>
		<li class="letter">o</li>
		<li class="letter">p</li>
		<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
		<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
		<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
		<li class="capslock">caps lock</li>
		<li class="letter">a</li>
		<li class="letter">s</li>
		<li class="letter">d</li>
		<li class="letter">f</li>
		<li class="letter">g</li>
		<li class="letter">h</li>
		<li class="letter">j</li>
		<li class="letter">k</li>
		<li class="letter">l</li>
		<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
		<li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
		<li class="return lastitem">return</li>
		<li class="left-shift">shift</li>
		<li class="letter">z</li>
		<li class="letter">x</li>
		<li class="letter">c</li>
		<li class="letter">v</li>
		<li class="letter">b</li>
		<li class="letter">n</li>
		<li class="letter">m</li>
		<li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
		<li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
		<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
		<li class="right-shift lastitem">shift</li>
		<li class="space lastitem">&nbsp;</li>
	</ul>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html>

不要太在意这巨量的li元素，我们使用jQuery代码的时候我会解释它们的作用，而其他的一些类名，比如right-shift和lastitem，是因为我们在CSS中要用到它们。

第二步：美化这些列表元素

只使用Javascript而不使用CSS的话，这个键盘工作起来也正常，但它就会看起来不像键盘。下面的样式的作用我不会逐个去解释，因为它们很容易看懂，然后将下面的代码保存到style.css文件中去，放到css文件夹里面。

* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
}
	#keyboard li {
	float: left;
	margin: 0 5px 5px 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #f9f9f9;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
		.capslock, .tab, .left-shift {
		clear: left;
		}
			#keyboard .tab, #keyboard .delete {
			width: 70px;
			}
			#keyboard .capslock {
			width: 80px;
			}
			#keyboard .return {
			width: 77px;
			}
			#keyboard .left-shift {
			width: 95px;
			}
			#keyboard .right-shift {
			width: 109px;
			}
		.lastitem {
		margin-right: 0;
		}
		.uppercase {
		text-transform: uppercase;
		}
		#keyboard .space {
		clear: left;
		width: 681px;
		}
		.on {
		display: none;
		}
		#keyboard li:hover {
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #e5e5e5;
		cursor: pointer;
		}

注意下面的样式，它们非常重要

1、.on——在有的li标签中，有两个span标签，这是因为它们的按键上有两个字符，比如数字键。而拥有on类名的字符会隐藏起来，当点击shift按键时，它们才会出现。

2、.lastitem——每一行的最后一个字母所在的元素，都必须除掉其margin-right值，以免破坏布局。

第三步：让按键拥有生命

你现在如果单击这些按键，不会有任何效果，下面我们用一点jQuery代码来解决这个问题。我们的主体思想是为每个列表项加上单击处理，单击的同时获取按键上的文本，用列表项的类来处理这个问题。当然了，从现在开始的js代码，都请放到js文件夹下的keyboard.js这个文件里。

初始设置

使用jQuery，然后我们要定义三个变量，用于整个代码中，它们是文本域（textarea）、shift按键的状态和大写字母锁定键（CapsLock）的状态。

$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;

	// The rest of the code goes here.
});

下面要做的是，为每个列表项目（按键）都增加上单击处理，当按键被点击时我们要处理两个变量。定义$this来减少我们的输入，character则用来定义列表项目的HTML，如果列表项目中是个字母，则变量会按原值返回。

$('#keyboard li').click(function(){
	var $this = $(this),
		character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

	// Code for processing the key.
});
 

Shift键和CapsLock键

如果shift键（带有类left-shift或类right-shift）被点击了，我们要转换所有的字母为大写状态，对于带有类symbol的列表项目，我们将转换显示套嵌的span标签，然后我们要做的是为shift设置一个相反的布尔值（比如值为true就设置为false，反之亦然）。再为capslock设置false，然后返回false让character变量不发生变化。

// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
	$('.letter').toggleClass('uppercase');
	$('.symbol span').toggle();

	shift = (shift === true) ? false : true;
	capslock = false;
	return false;
}

现在，如果capslock键被点击，我们就转换为字母为小写，设置capslock变量为true，用false作为返回值。

// Caps lock
if ($this.hasClass('capslock')) {
	$('.letter').toggleClass('uppercase');
	capslock = true;
	return false;
}

删除键

为delete键，我们得指定另外一个变量：html——当前textarea中的内容。一旦点击了delete键，我们就用textarea中的值去掉最后一个字母，重新设置为textarea的内容，用Javascrip的substr方法来实现它。接着我们依然返回false让一切保持原样。

// Delete
if ($this.hasClass('delete')) {
	var html = $write.html();

	$write.html(html.substr(0, html.length - 1));
	return false;
}

特殊字符

对于不是字母键和功能键的其他按键，我们利用character变量来做一些特别的事情。对于带有symbol类的键，character就被设置为span为visible时的键的内容，然后空格用于空格键，点击Tab键时将character设置为\t，最后的回车键则设置character为\n。

// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";

大写字母

如果你还记得，当我们按下键盘上的shift或者CapsLock键，那么“uppercase”这个类就会用toggleClass这个函数添加或删除到键盘上的字母键上。如果这个类在字母键上找不到，那么这些字母都会使用toUpperCase的方法，转化为相应的大写形式。

// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();

最后

对于正常的键盘，shift键每次只对一个字母键起作用。如果shift变量被设置为true，我们就转换symbol的span的显示，同样的，当CapsLock键被按下时，字母键的大小写也会进行转换。

最后要做的，就是把字母都显示到textarea文本区内并且让用户可以继续“键入”。

// Remove shift once a key is clicked.
if (shift === true) {
	$('.symbol span').toggle();
	if (capslock === false) $('.letter').toggleClass('uppercase');

	shift = false;
}

// Add the character
$write.html($write.html() + character);

最终的Javascript代码

$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;

	$('#keyboard li').click(function(){
		var $this = $(this),
			character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

		// Shift keys
		if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.symbol span').toggle();

			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		}

		// Caps lock
		if ($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		}

		// Delete
		if ($this.hasClass('delete')) {
			var html = $write.html();

			$write.html(html.substr(0, html.length - 1));
			return false;
		}

		// Special characters
		if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
		if ($this.hasClass('space')) character = ' ';
		if ($this.hasClass('tab')) character = "\t";
		if ($this.hasClass('return')) character = "\n";

		// Uppercase letter
		if ($this.hasClass('uppercase')) character = character.toUpperCase();

		// Remove shift once a key is clicked.
		if (shift === true) {
			$('.symbol span').toggle();
			if (capslock === false) $('.letter').toggleClass('uppercase');

			shift = false;
		}

		// Add the character
		$write.html($write.html() + character);
	});
});

总结

有时像这样折腾一下挺好的，虽然可能最后的结果不完全如我们所愿。这次，只需要对列表的项目应用一些类名，我们就可以用CSS和jQuery来创建一个屏幕键盘。我们今天做的这个屏幕键盘也不是完全没用，有的网站上不就有屏幕键盘来辅助输入的么？关键在于，这样折腾一下，能让我们更好的理解CSS和jQuery搭配使用能产生的强大效果。

文本来源于Creating a Keyboard with CSS and jQuery，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。

相关阅读

• youlove.us上的背景滚动效果是怎样实现的（翻译）
• 使用jQuery创建滑动图片/显示内容的效果（翻译）
• 使用jQuery制作精致的复选框（翻译）
• 鼠标悬浮显示@reply的评论
• 用jQuery创建简单的滑动导航菜单
• 使用CSS美化文件上传表单
• 用jQuery或者CSS3创建简单的动态按钮
• jQuery中处理动画序列引起的问题
• 用CSS3创建漂亮的链接提示
• 修正一下jQuery插件Colortip在IE6下面的显示问题

© ZH CEXO for ZH CEXO's BLOG, 2010. | 查看原文 | 44 条评论
标签: jQuery, 教程, 翻译

它怎么工作的

这个技巧实现起来比它看起来容易得多，其实它就是把一张很长的渐变图像放到一些透明的PNG图像后面去滚动。页眉的背景（包括我们的LOGO、导航条和笔记本图像）都有透明度和一些文字，但主页面的图像上的标题文字则是透明图像。

用到的图片

整个效果中我们使用本站的图片，不过你有需要的可能就只是背景和页眉的图片吧，我们有：

背景图片

页眉图片

主页内容图片

页脚图片

CSS

为了对搜索引擎、屏幕阅读器和早先版本的浏览器友好，我为还是得在背景图片上加上说明文字，然后再用CSS把它们隐藏起来。

JavaScript

JavaScript就是让这一切变得神奇的魔法，这里我们使用jQueyr框架和CSS来让背景动起来。

$(function() {

	// ***
	// 背景滚动
	// ***

	// 背景图像高度，单位px
	var backgroundheight = 4000;

	// 取得当前时间的分钟/小时
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();

	// 计算一下今天已经过了百分之多少，例如下午六点 = 75%
	var hourpercent = hour / 24 * 100;
	var minutepercent = minute / 60 / 24 * 100;
	var percentofday = Math.round(hourpercent + minutepercent);

	// 计算一下从多少px的地方开始滚动图像
	// 通过使用今天已经过的百分比
	var offset = backgroundheight / 100 * percentofday;

	// 图像的起点大约是早点六点, 所以调整它偏移 1/4
	var offset = offset - (backgroundheight / 4);

	function scrollbackground() {
		// 将偏移量降到1px为止, 如果小于1px，就增加它
		// 背景的最小高度为1px
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// 应用背景的位置
   		$('body').css("background-position", "50% " + offset + "px");
   		// 让它继续滚动
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}

	// 开始滚动
	scrollbackground();
}

真正灵巧的部分

读过上面的代码你可能会注意到，如果你在一天内不同的时间来访问我们的网站，那么背景也是从不同的地方开始滚动的，比如说，如果你是晚上访问我们的网站，你会看见夜空的背景，如果在早上，你会看见日出~

如果你有任何评价、疑问或者对代码改进的看法，可以和我们联系。

2009-07-30更新

一些评论中提到，在Firefox 3.5下面CPU的占用率会大幅上升，所以我就更新了代码。新的代码抛弃了backgroundposition.js和jQuery的animate()方法，使用的是简单的改变CSS中body背景的background-position值，每次循环改动1px。在一些使用Firefox 3.5的老电脑上，CPU的占用率已经从65%左右下降到了30%，其他的浏览器好像还没出现这个问题，欢迎继续反馈！

译者注：

最后一句不知道怎么翻译：CPU usage on an older machine running FireFox 3.5 went from around 65% to 30%. All other browsers still appear not to struggle with it.囧……

就我自己体验，在Firefox 3.5上使用这个效果很卡，而其他浏览器不会出现问题。

查看效果

直接访问http://youlove.us/，然后仔细看看首页头部的背景，中部标题的颜色和页脚背景的变化，相当不错的效果。

文本来源于The youlove.us scrolling background effect explained，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。

相关阅读

• 利用CSS和jQuery创建一个屏幕键盘
• 使用jQuery创建滑动图片/显示内容的效果（翻译）
• 使用jQuery制作精致的复选框（翻译）
• 鼠标悬浮显示@reply的评论
• 用jQuery创建简单的滑动导航菜单
• 使用CSS美化文件上传表单
• 用jQuery或者CSS3创建简单的动态按钮
• jQuery中处理动画序列引起的问题
• 用CSS3创建漂亮的链接提示
• 修正一下jQuery插件Colortip在IE6下面的显示问题

© ZH CEXO for ZH CEXO's BLOG, 2009. | 查看原文 | 15 条评论
标签: jQuery, 教程, 翻译