jquery中siblings和slideDownslideUp应用.docx
-
资源ID：3159842
资源大小：36.82KB
全文页数：3页
- 资源格式： DOCX
下载积分：6.99金币
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
jquery中siblings和slideDownslideUp应用.docx
jquery中siblings和slideDownslideUp应用jquery中siblings和slideDown、slideUp应用 siblings(可选)： 用于筛选同辈元素的表达式 slideUp： speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (Function) : (可选) 在动画完成时执行的函数 效果图： HTML代码： <div class="menubox"> <div class="menucount"></div> <a class="menubt" style="right:240px;" href="#">菜单一</a> </div> <div class="menubox"> <div class="menucount"></div> <a class="menubt" style="right:160px;" href="#">菜单二</a> </div> <div class="menubox"> <div class="menucount"></div> <a class="menubt" style="right:80px;" href="#">菜单三</a> </div> <div class="menubox"> <div class="menucount"></div> <a class="menubt" style="right:0;" href="#">菜单四</a> </div> CSS代码： body margin:0; padding:0; .menubox position:absolute; width:100%; z-index:100; .menucount display:none; height:80px; overflow:hidden; background:#999999; #boxOpen height:80px; display:block; .menubt display:block; float:right; position:absolute; display:block; background:url(images/bg.gif); color:#FFFFFF; text-decoration:none; width:78px; height:21px; text-align:center; font-size:12px; .menubtOpen display:block; float:right; position:absolute; display:block; background:#0066FF; color:#FFFFFF; text-decoration:none; width:50px; jquery代码如下： $(function $(".menubt").click(function $(this).blur; if($(this).siblings("div").css("display") = "none") $(".menucount:visible").slideUp(200,function $(this).parent.css("zIndex","100");); $(this).siblings("div").slideDown(200,function $(this).parent.css("zIndex","10");); $(this).siblings("div").attr("id","#boxOpen"); else $(this).siblings("div").slideUp(200,function $(this).parent.css("zIndex","100");); ) ) 图片bg.gif：
