新手教程：10个jQuery特效讲解.doc

jQuery已经不是什么新鲜的事儿，记得第一次听说是在catch the digital flow上。总把它认为是非常难的东西，也就没有认真去了解他了。直到学完CSS的大部分内容，才开始接触这种write less, do more 的Javascrīpt框架。今天，这篇文章的最重要内容是来自Web Designer Wall的一篇教程，一篇包含了10个jQuery特效的教程。这里不打算全文翻译，想以自己的语言来表达，或许这样更方便 大家理解/自己以后学习，也可能更准确地描述。 提示：教程中所用的jQuery 版本为1.2.3。这篇文章是为jQuery新手而写的。 先试试看？ View jQuery Demos ｜ Download Demo ZIP jQuery是如何工作的? 首先，你需要下载一个jQuery版本，并将它 插入到head标签内。然后，你将需要写函数来告 诉jQuery做些什么，下面的这个图表将告诉你jQuery是怎样工作的（点击图片，查看大图）： ！ 如何获取元素（Get the element）? 书写 jQuery 函数是一个非常简单的事（多亏了精彩的说明书）。关键是你要学习如何 获取你想要实现的效果的确切元素。 $(#header) = 获取 id=header 的元素 $(h3) = 获取所有h3 $(div#content .photo) = 获取div id=content里所有用class=photo定义的元素 $(ul li) = 获取所以 ul 中 li 的元素 $(ul li:first) = 只获取ul中第一个li 1. 简单的下拉面板 让我们来开始这个简单的下拉面板特效吧(view demo)，或 许你已经见过很多次，现在，自己试试吧： 当包含class=btn-slide的元素被点击，它会下拉/上提div id=panel里的元素。然后切换到CSS中的class=active到a class=btn-slide元素。.active 将会以CSS的方式打开/关闭出面板。 $(document).ready(function(){ $(.btn-slide).click(function(){ $(#panel).slideToggle(slow); $(this).toggleClass(active); }); }); 2. 简单的隐藏效果 如图，当右上角的上图标被点击时，内容被隐藏。效果可以看Demo (view demo) 当被定义为 img class=delete 的图片被点击，它会手找到父级元素 div class=pane 并激活它的能力，慢慢消失，隐藏起来。 $(document).ready(function(){ $(.pane .delete).click(function(){ $(this).parents(.pane).animate({ opacity: hide }, slow); }); }); 3 连续过渡效果 让我们来看看jQuery连贯性的威力吧。只需要几行代码，我能让这个方块渐变+缩放比例地飞来飞去(view demo) Line 1: 当 a class=run 被点击Line 2: 激活 div id=box 的不透明度（opacity）=0.1，直到值达到400px，速度达到1200px/msLine 3: 当opacity=0.4, top=160px,height=20,width=20,以slow显示Line 4: 当opacity=1, left=0, height=100, width=100,也以slow显示Line 5: 当opacity=1, left=0, height=100, width=100, 也以slow显示Line 6: 当top=0, 以fast显示Line 7: 然后，以常速上滑 (default speed = normal)Line 8: 然后以slow下滑Line 9:返回失效会阻止浏览器跳向链接锚点 $(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() .sl