好资源导航 » 文章资讯 » JQuery特殊效果和链式调用操作示例

JQuery特殊效果和链式调用操作示例

2023-08-23 14:13:04 198

本文实例讲述了JQuery特殊效果和链式调用操作。分享给大家供大家参考，具体如下：

JQuery的特殊效果

fadeOut()淡入
fadeToggle()切换淡入淡出
hide()隐藏元素
show()现实元素
toggle()切换元素的可见状态
slideDown()向下展开
slideUp()向上卷起
slideToggle()依次展开或者卷起某个元素





Title

.box{
width:300px;
height:300px;
background-color:gold;
display:none;
}

点击按钮，元素淡出，完成之后弹出done，不知道为什么，没有运行出来，可能是浏览器的问题。

链式调用-层级菜单





Title

body{
font-family:'MicrosoftYahei';
}
bodyul{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.menu{
width:300px;
height:300px;
}
.menu.level1,.menuliula{
display:block;
width:300px;
height:30px;
line-height:30;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
}
.menu.level1{
border-bottom:1pxsolid#afc6f6;
}
.menuliula{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef;
}
.menuliulli{
border-bottom:1pxsolid#afc6f6;
}
.menuliul{
display:none;
}
.menuliullia:hover{
background-color:#f6b544;
}



$(function(){
$('.level1').click(function(){
$(this).next().stop().slideToggle().parent().sibling().children('ul').slideUp();
})
})





水果

苹果
梨子
葡萄
火龙果



海鲜

鱼
扇贝
龙虾
象牙蚌



肉类

牛肉
猪肉
肌肉

链式调用：

level1的下一级淡入淡出，返回上一级的，孩子隐藏。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》

希望本文所述对大家jquery程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

JQuery特殊效果和链式调用操作示例

热门推荐

随机推荐