您当前位置：首页 > web前端 > jquery > 给设计师的jQuery教程（第二部分）

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

来源：程序员人生发布时间：2014-03-14 12:11:48 阅读次数：3280次

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

翻译自：web designer wall

4a.手风琴1

先看一个手风琴的Demo。

sample3

$(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)默认的打开的。

$(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

$(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

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

});

　　第一步：为每一个.menu2 a 动态紧跟一个<em>

　　第二步：绑定两个mousein mouseout函数给hover，前者找到.menu2 a下一个邻接元素<em>绑定动画以及添加存储在<a>的title中的文本。

　　6.整个块的可点击化（a化）（Demo）

　　如何让整个block都可以点击呢？

sample5

$(document).ready(function(){

$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});

});

　　假如你有一个<ul class=”pane-list”>的ul并且你想让嵌套其中的每一个<li>都像<a>一样整个块元素都可以点击链接。你可以这样做：绑定click到每个.pane-list li上，当点击的时候，找到li嵌套的a取出其href然后重定向。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 什么是 Repaint 和 Reflow, 相关介绍

下一篇 纯CSS圆角框3：圆角化图片

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点