jQuery教程(上)

特效, jQuery, java, 教程

来源:jQuery Tutorials for Designers
本文包括10个视频教程以供设计者和新手学习如何用jQuery来应用java. 加入你不知道jQuery,这里就是"write less , do more"的java实验室.很多的Ajax 和java特性允许你来提高用户体验和语义编码(semantic coding).这些教程关注的是jQuery,因此不会过多讨论CSS细节.
注:本文用的版本为jQuery1.2.3
View jQuery Demos
Download Demo ZIP

jQuery如何工作?
首先你要下载一个jQuery的副本并且插入到你的html文件中(最好是在<head>标签中).接下来就要写函数来调用jQuery.下面就是jQuery的工作图解.

如何获得元素(elements)?
写jQuery函数相对来讲比较容易(感谢这些精彩的文档),你要掌握的关键是要知道如何获得你想应用的确切的元素

$("#header") = get the element with id="header"
$("h3") = get all <h3> element
$("div#content .photo") = get all element with class="photo" nested in the <div id="content">
$("ul li") = get all <li> element nested in all <ul>
$("ul li:first") = get only the first <li> element of the <ul>

1.简单的幻灯片面板
让我们来做一个简单的幻灯片面板,这个你应该见到的很多,当你点击一个链接会出现一个幻灯片面板(见demo)
当定义类<class="btn-slide">的元素被点击,它就会滑动"开/关"盒子,<divid="panel">元素,然后触发一个CSS类,class="active"来样式化<aclass="btn-slide">元素.".active"类将会触发箭头图标的背景位置(通过CSS)

$(document).ready(function(){

      $(".btn-slide").click(function(){
      $("#panel").slideToggle("slow");
      $(this).toggleClass("active");
      });

});

2.简单的消失特效
本例告诉你做一个当点击图片按钮时出现消失的特效(见demo)

当<img class="delete">被点击时,它会发现其父元素<div class="pane">,并且赋予其能力(慢慢隐藏)

$(document).ready(function(){

      $(".pane .delete").click(function(){
      $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
      });

});

3.chain-able 过渡效果
让我们来感受以下jQuery的chainability,只需要数行代码,我能够作出一个带有尺寸变化和消失特效的飞行的盒子.(见demo)

Line 1: when the <a class="run"> is clicked
Line 2: animate the <div id="box"> opacity=0.1, left property until it reaches 400px, with speed 1200 (milliseconds)
Line 3: then opacity=0.4, top=160px, height=20, width=20, with speed "slow"
Line 4: then opacity=1, left=0, height=100, width=100, with speed "slow"
Line 5: then opacity=1, left=0, height=100, width=100, with speed "slow"
Line 6: then top=0, with speed "fast"
Line 7: then slideUp (default speed = "normal")
Line 8: then slideDown, with speed "slow"
Line 9: return false will prevent the browser jump to the link anchor

$(document).ready(function(){

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

      $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
      .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
      .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
      .animate({top: "0"}, "fast")
      .slideUp()
      .slideDown("slow")
      return false;

      });

});

4a. 折叠特效#1
下面是一个折叠特效的例子(见demo)

在第一行的盒子<div class="accordion">中的<H3>元素中增加了一个CSS类<class="active"> ("active"类会转移箭头图标的位置),
在第二行隐藏了盒子<div class="accordion">所有的<p>元素
当<H3>元素被点击,它就会滑动触发下一个<p>并且滑动上其所有的同类元素,然后触发< class="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
与上例类似,不同在于用面板做默认开关(见 demo)
在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
本例会做一个漂亮的栩栩如生的hover特效(褪去/出现) (见demo)

当鼠标滑过菜单链接,jQuery就会发现下一个<em>并且出现不透明动画位于顶层.

$(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属性,作为储存变量,然后附加到<em>标签(view demo)

第一行附加一个空的<em>标签到菜单的<a>元素中
当鼠标滑过链接时,就会获得title属性,并赋予"hoverText",然后用"hoverText"的值设置<em>文本内容

  $(document).ready(function(){

      $(".menu2 a").append("<em></em>");

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

});