jQuery特性效果与链式调用
1.显示效果
专注于为中小企业提供成都网站建设、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业芦淞免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
特殊效果
$(function(){
$('#btn').click(function(){
/*fadeOut(时间,函数)*/
/*$('.div1').fadeOut(1000);*/
/*fadeToggle淡出淡入*/
/*$('.div1').fadeToggle(1000);*/
/*toggle()切换元素可视状态*/
/*$('.div1').toggle(1000);*/
/*hide()隐藏*/
/*$('.div1').hide(1000);*/
/*show()显示元素*/
/*$('.div1').show(1000);*/
/*slideDown()向下展开*/
/*$('.div1').slideDown(1000);*/
/*slideUp()向上卷起*/
/*$('.div1').slideUp(1000);*/
/*slideToggle()向下向上反复*/
$('.div1').slideToggle(1000);
})
})
.div1{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
2.链式调用
层级菜单
$(function(){
$('.level1').click(function(){
/*点击a,next()就是ul,stop()修正反复点击,向上向下伸展,父级li,siblings()其他同级li,ul子元素,升起*/
$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
})
})
.menu{
width: 100px;
background-color: aqua;
list-style: none;
padding: 0;
margin: 50px auto 0;
}
.menu li{
border-bottom: 1px solid #fff;
}
.menu li a{
text-decoration: none;
color: #8820AF;
}
.menu li ul{
background-color: #DDD4D5;
list-style: none;
padding: 0;
text-align: center;
}
.menu li ul li:hover{
background-color: antiquewhite;
}
当前文章:jQuery特性效果与链式调用
网址分享:http://pwwzsj.com/article/pihhhd.html