标签添加"active"类方法（用来切换箭头图标的背景位置）；在第二行，隐藏第一个除外的所有

中的

标签。

点击

标签时，牵引下一个

标签并向上滑动其所有的同类标签。

代码如下：$(document).ready(function(){ $(".accordion h3:first").addclass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slidetoggle("slow")
.siblings("p:visible").slideup("slow");
$(this).toggleclass("active");
$(this).siblings("h3").removeclass("active");
});
});

4b，折叠样式2

这个效果跟4a中的效果基本一致，唯一不同的是指定了初始默认打开的层(点击观看效果)。

工作原理：在css样式表中设置.accordion p的display:none。假如你想设置第三个层为默认的打开状态，那么你就可以这样写：
$(".accordion2 p").eq(2).show(); //(eq = equal)默认从0开始计数
代码如下：$(document).ready(function(){ $(".accordion2 h3").eq(2).addclass("active");
$(".accordion2 p").eq(2).show();
$(".accordion2 h3").click(function(){
$(this).next("p").slidetoggle("slow")
.siblings("p:visible").slideup("slow");
$(this).toggleclass("active");
$(this).siblings("h3").removeclass("active");
});
});

5a，漂亮的鼠标hover悬停效果1

本例实现的是一个精美的鼠标悬停时的渐隐渐现效果(点击观看效果)。

图6 漂亮的鼠标hover悬停效果1
工作原理：鼠标悬停在链接菜单上时，找到下面的并激活其opacity不透明属性和top位置。
代码如下：$(document).ready(function(){ $(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});

5b，漂亮的鼠标hover悬停效果2

这个例子是获取链接菜单的title属性，保存在一个变量里面，然后附加给标签(点击观看效果)。

图7 漂亮的鼠标hover悬停效果2
工作原理：在第一行将一个空的赋值给链接菜单的元素。鼠标悬停在链接菜单上时，就会获取title的属性，保存给一个"hovertext"变量，然后把"hovertext"的值赋给的文本内容。
代码如下：$(document).ready(function(){ $(".menu2 a").append("");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hovertext = $(this).attr("title");
$(this).find("em").text(hovertext);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});

6，块级鼠标样式

本例展示的是一个块级鼠标样式，就像best web gallery这个网站的侧边栏效果似的(点击观看效果)。

图8 块级鼠标样式
工作原理：假设你有一个class属性为”pane-list”的

列表，你希望嵌套在其内部的
• 可以实现块状点击样式，你就可以把这个点击方法赋值给”.pane-list li”。在点击时，这个方法就会找到元素，并重定向浏览器位置到它的href属性值。
  代码如下：$(document).ready(function(){ $(".pane-list li").click(function(){
  window.location=$(this).find("a").attr("href"); return false;
  });
  });
  

  7，折叠面板

  现在，让我们结合上面例子的技巧方法，创建一个折叠面板效果吧（跟gmail收件箱效果差不多）(点击观看效果)。

  
  图9 折叠面板样式
  工作原理：
  

  第一行：隐藏除第一个以外的所有

  第二行：隐藏第五个后面的所有

• 标签

  第三行：当点击

  时，牵引滑动下一个

  第四行：当点击按钮时，向上滑动所有的

  第五行：当点击时，隐藏本身，显示，并向下滑动第五个以后的所有

• 最后一行：当点击时，隐藏本身，显示class=”show_all_message”>，并向上滑动第五个以后的所有

• 代码如下：$(document).ready(function(){ //hide message_body after the first one
  $(".message_list .message_body:gt(0)").hide();
  //hide message li after the 5th
  $(".message_list li:gt(4)").hide();
  //toggle message_body
  $(".message_head").click(function(){
  $(this).next(".message_body").slidetoggle(500)
  return false;
  });
  //collapse all messages
  $(".collpase_all_message").click(function(){
  $(".message_body").slideup(500)
  return false;
  });
  //show all messages
  $(".show_all_message").click(function(){
  $(this).hide()
  $(".show_recent_only").show()
  $(".message_list li:gt(4)").slidedown()
  return false;
  });
  //show recent messages only
  $(".show_recent_only").click(function(){
  $(this).hide()
  $(".show_all_message").show()
  $(".message_list li:gt(4)").slideup()
  return false;
  });
  });
  

  8，模仿wordpress后台评论管理

  可能我们绝大多数人都看到过wordpress aiax后台评论管理效果。在这个例子中，我们就用jquery模仿出这个效果，不过首先你要用到一个color animations插件）(点击观看效果)。

  
  图10 wordpress后台评论管理样式
  工作原理：
  

  第一行：添加”alt”类给

  （给每个

  赋值灰色背景）

  第二行：在点击时，弹出警告框信息后，激活

  层的背景色和不透明度

  第三行：点击时，使

  层的背景色变黄再变白，并增加”spam”类样式

  第四行：点击时，使

  层的背景色变绿再变白，并移除”spam”类样式

  最后一行：点击时，背景色变红，并设置不透明度为”hide”

  代码如下：//don't forget to include the color animations plugin
  //$(document).ready(function(){
  $(".pane:even").addclass("alt");
  $(".pane .btn-delete").click(function(){
  alert("this comment will be deleted!");
  $(this).parents(".pane").animate({ backgroundcolor: "#fbc7c7" }, "fast")
  .animate({ opacity: "hide" }, "slow")
  return false;
  });
  $(".pane .btn-unapprove").click(function(){
  $(this).parents(".pane").animate({ backgroundcolor: "#fff568" }, "fast")
  .animate({ backgroundcolor: "#ffffff" }, "slow")
  .addclass("spam")
  return false;
  });
  $(".pane .btn-approve").click(function(){
  $(this).parents(".pane").animate({ backgroundcolor: "#dafda5" }, "fast")
  .animate({ backgroundcolor: "#ffffff" }, "slow")
  .removeclass("spam")
  return false;
  });
  $(".pane .btn-spam").click(function(){
  $(this).parents(".pane").animate({ backgroundcolor: "#fbc7c7" }, "fast")
  .animate({ opacity: "hide" }, "slow")
  return false;
  });
  });
  

  9，图片展示切换

  如果你不想通过页面跳转的方式来展示多幅图片的话，那么这个例子的方法绝对是可行的。你可以把jpg图片加载到一个target中去(点击观看效果)。

  
  图11 图片展示切换样式
  工作原理：首先为h2添加一个空的。当一个

  内的链接被触发时，把href属性赋给一个”largepath”变量；把title属性赋给一个”largealt”变量；用变量”largepath”替换的scr属性；用变量”largealt”替换alt属性；最后，用变量的largealt（附加在brackets中）设置h2内em内容。
  代码如下：$(document).ready(function(){ $("h2").append('')
  $(".thumbs a").click(function(){
  var largepath = $(this).attr("href");
  var largealt = $(this).attr("title");
  $("#largeimg").attr({ src: largepath, alt: largealt });
  $("h2 em").html(" (" + largealt + ")"); return false;
  });
  });
  

  10，样式化不同链接类型

  对于大多数流行的浏览器来说，定义不同类型的链接样式是非常容易的。例如，定义一个.pdf格式文件的链接样式，我们可以使用这样的css规则实现：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持这种定义（这也是我们为什么讨厌ie浏览器的一个原因）。为了实现浏览器间的兼容性，我们可以用jquery实现(点击观看效果)。
  
  图12 图片展示切换样式
  工作原理：前三个链接样式要各自定义实现，根据他们的href属性分别调用css样式给各自的；其他的部分，使得所有没有"http://webdesignerwall.com"和/或在href属性中不是以”#”开头的标签，然后添加”external”样式，并设置打开target为”_blank”。
  代码如下：$(document).ready(function(){ $("a[@href$=pdf]").addclass("pdf");
  $("a[@href$=zip]").addclass("zip");
  $("a[@href$=psd]").addclass("psd");
  $("a:not([@href*=http://webdesignerwall.com])").not("[href^=#]")
  .addclass("external")
  .attr({ target: "_blank" });
  });
  

  ｐｓ：其实看到这篇文章好几天了，只是没时间翻译过来分享。今天弄到了半夜终于搞定了，翻译比较粗糙，如有错误瑕疵，请一定指正。翻译的过程中，学到了很多东西，加深了我对jquery的爱。

  菠菜博下载：网站设计师jquery指南打包下载 原文下载地址

  菠菜博demo：点击浏览 原文demo

  原文地址：jquery tutorials for designers

  中文翻译：网站设计师jquery上手指南

  翻译博客：菠菜博

  http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html

  
  该文章在 2010/4/27 2:48:12 编辑过