给设计师的jQuery教程（第二部分）

发布时间：2018-08-19 15:06:52 所属栏目：传媒来源：站长网

导读：副标题#e# 上一篇：给设计师的jQuery教程（第一部分）翻译自：web designer wall 4a.手风琴1 先看一个手风琴的Demo。 Copy to Clipboard 引用的内容：[www.veryhuo.com]$(document).ready(function(){ $(.accordion h3:first).addClass(active); $(.accord

副标题[/!--empirenews.page--]

上一篇：给设计师的jQuery教程（第一部分）

翻译自：web designer wall

4a.手风琴1

先看一个手风琴的Demo。

sample3

Copy to Clipboard Liehuo.Net Codes

引用的内容：[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>的背景图片的位置以此来改变箭头的方向）。

第二行：影藏所有的在<div class=”accordion”>中的<p>，除了第一个<p>。

第三行：当任何一个<h3>被点击的时候，取得紧跟着的<p>，滑入显示（slideToggle），滑出影藏（slideUp）该<p>的可见（）的同级兄弟元素（siblings）。

第四行：为被单击的<h3>添加CSS active。

第五行：去除所有其同级兄弟节点的可能有的active CSS。

4b.手风琴2（Demo）

这个例子和手风琴1很相似，只是可以选择哪个面板(panel)默认的打开的。

Copy to Clipboard Liehuo.Net Codes

引用的内容：[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)

使用fade in /out设计出很酷的Hover效果。

sample4

Copy to Clipboard Liehuo.Net Codes

引用的内容：[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）两个函数参数，分别在划入和滑出的时候调用。

5b.Hover动画效果2（Demo）

该实例运用<a>的title属性存储本来要在<em>中显示的文本，让你后通过jQuery动态得到文本，扩展添加<em>以及里面的文本。

sample4b

Copy to Clipboard Liehuo.Net Codes

引用的内容：[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");
});

});

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/3

尾页