您的位置:首页 > Web前端 > JQuery

jQuery入门学习之实现滑动效果:slideUp()和slideDown()小总结

2009-08-12 17:02 741 查看
周一的时候看着教程写了个实现滑动效果的例子,里面是实现了滑动效果的,但是当时对jQuery不是太懂,所以只是实现了,
具体没有怎么看的,今天回头看了下这个,发现里面的方法我都是不理解的,所以Google、帮助文档的恶补了一下,居然明白了。
html代码:
<dl id="faq">
<dt>问题展示1</dt>
<dd>这是问题1的答案……</dd>

<dt>问题展示2</dt>
<dd>这是问题2的答案……</dd>

<dt>问题展示3</dt>
<dd>这是问题3的答案……</dd>
</dl>
JQuery:
$(document).ready(function()
{
$('#faq').find('dd').hide().end().find('dt').click(function(){
var answer=$(this).next();
if(answer.is(':visible'))
{
answer.slideUp();
}
else
{
answer.slideDown();
}
});
});
//加个样式 效果更好些
$(document).ready(function(){
$("dt").css('cursor','pointer');
});

A: find():这个函数是找出正在处理的元素的后代元素的好方法。
B: hide():隐藏显示的元素 $("li").hide();
C: end():开始没有在文档中找到方法的,不过就在刚才找到了,居然在属性-筛选-串联下边。
文档中的解释:回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
不过我是在一个例子中明白这个end()具体是怎么的一个函数的
例子:
alert($("#css").find("#rain").end().html());
解释如下:
end()结束对 “#rain” 的引用而返回到 “#css ”
所以“ html()” 是对于 “#css” 起作用的
如果不加end() 则 “html()”是对 #rain 起作用

end()方法其实很简单,比如:
$(“#fag”)
.find("dd") //此时获取的是 dd
.end( ) //end后又回到 fag
.find(“dt”) //因为刚才返回到fag了,所以这里的find去fag里面找。
D:next():取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。只获得
一个的,获得所有 那么就要用nextAll,它是查找当前元素之后所有的同辈元素。
var answer=$(this).next(); 这个也就是获得dt(问题)标签下面标签dd(答案)的内容了。

E:slideUp(speed, [callback]),这个总感觉直接拿来用就可以了。
解释:通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。
speed:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback:在动画完成时执行的函数(可选)
F:sileDown(speed, [callback]):和sileUp()用法一样的。
解释:通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

如释重负,终于写完了。新手博文,如有不对的地方,请大家告知一二。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: