jQ效果(滑动)
1、 slideDown() 方法用于向下滑动元素
语法:$(selector).slideDown(speed,callback);
speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒
callback 参数是滑动完成后所执行的函数名称
css:
<style>
.flip,.panel{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel{
padding:50px;
display:none;
}
</style>
html: <div class="flip">点我展开面板</div> <div class="panel">你好!</div>
jq:
<script>
//展开面板
$(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>
2、slideUp(),用于向上滑动元素
语法:$(selector).slideDown(speed,callback);
speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒
callback 参数是滑动完成后所执行的函数名称
jq:
<script>
//拉起面板
$(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
</script>
3、 slideToggle() ,可以在 slideDown() 与 slideUp() 方法之间进行切换
如果元素向下滑动,则 slideToggle() 可以向上滑动
如果元素向上滑动,则 slideToggle() 可以向下滑动
语法:$(selector).slideToggle(speed,callback);
speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒
callback 参数是滑动完成后所执行的函数名称
jq:
<script>
//显示或隐藏面板
$(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
浙公网安备 33010602011771号