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>

  

猜你喜欢

转载自www.cnblogs.com/1500418882qqcom/p/10008498.html
今日推荐