给设计师的jQuery教程（第二部分）
|
副标题[/!--empirenews.page--]
上一篇：给设计师的jQuery教程（第一部分） 翻译自：web designer wall 4a.手风琴1 先看一个手风琴的Demo。
 引用的内容：[www.veryhuo.com]
$(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"); }); }); 第一行：添加class“activve”给嵌套在<div class=”accordion”>中的第一个<h3>（”active”class 改变<h3>的背景图片的位置以此来改变箭头的方向）。 4b.手风琴2（Demo） 引用的内容：[www.veryhuo.com]
$(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"); }); }); CSS样式表首先先将.accordion p 的display设置为none，影藏所有的<p>，假若你要开始默认显示第三个panel，你可以这样写javascript：$(“.accordion2 p”).eq(2).show();(eq=equal)。注意jQuery的对象集合的索引是从0开始计数的。 5a.Hover动画效果1(Demo)
引用的内容：[www.veryhuo.com]
$(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"); }); }); 当鼠标滑过菜单链接时，jQuery找到下一个邻接<em>然后修改渐变opacity和top值产生动画效果。注意hover（func1,func2）两个函数参数，分别在划入和滑出的时候调用。
引用的内容：[www.veryhuo.com]
$(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"); }); }); （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
