滑动动画

滑动处理可以实现显示时内容的卷边处理,可以使用如下的几个函数来进行滑动处理
- slideDown(事件,function()):向下滑动
- slideUp(事件,function()):向上滑动,
- slideToggle(事件,function(){}):实现滑动的切换处理

实现滑动处理

<html>
<head>
	<meta charset="utf-8"/>
	<title>jQuery的事件绑定处理</title>
	<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
	<link rel="style/sheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//设置层的滑动动画
			$("#myimg").slideUp(5000);
		});
	</script>
</head>
<body>

	<div id="myDiv">
		<img src="images/gd.jpg" id="myimg" width="500px"/>
	</div>
</body>
</html>

与之前hide()函数相比,滑动动画没有了渐变的效果

实现操作切换

在层向上滑动之后,在向下滑动回原先的状态

		$(function(){
			//设置层的滑动动画
			$("#myimg").slideUp(5000,function(){
			//在向上滑动结束后,调用向下滑动
				$(this).slideDown(5000);
			});
		});

很多时候考虑到切换的问题,所以提供有专门的slideToggle()函数

实现显示于隐藏的切换

		$(function(){
			//如果层原先是显示状态,则将其变为隐藏
			$("#myimg").slideToggle(1000,function(){
				//如果层是隐藏状态,则将其变为显示
				$(this).slideToggle(1000);
			});
		});

这种切换可以做一些简单的特效使用

图片的特效

<html>
<head>
	<meta charset="utf-8"/>
	<title>jQuery的事件绑定处理</title>
	<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
	<link rel="style/sheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			$("#show-but").on("click",function(){
				$(myimg).slideToggle(200);
			});
		});
	</script>
</head>
<body>
	<input type="button" id="show-but" value="显示">
	<div id="myDiv">
		<img src="images/gd.jpg" id="myimg" width="500px" style="display:none"/>
	</div>
</body>
</html>

你可以适当的提高一些动画的延迟事件,可以达到一些更好的效果

在这里插入图片描述

jQuery滑动动画

滑动动画

实现滑动处理

实现操作切换

实现显示于隐藏的切换

图片的特效

猜你喜欢