jQuery滑动动画

最新推荐文章于 2023-06-15 18:46:38 发布

{[("青椒盖饭")]}

最新推荐文章于 2023-06-15 18:46:38 发布

阅读量453

点赞数

分类专栏： javaweb学习笔记

本文链接：https://blog.csdn.net/qq_43386754/article/details/86495910

版权

javaweb学习笔记专栏收录该内容

77 篇文章 0 订阅

订阅专栏

滑动动画

滑动处理可以实现显示时内容的卷边处理,可以使用如下的几个函数来进行滑动处理
- 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>

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

在这里插入图片描述

{[("青椒盖饭")]}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery滑动动画

滑动动画滑动处理可以实现显示时内容的卷边处理,可以使用如下的几个函数来进行滑动处理slideDown(事件,function()):向下滑动slideUp(事件,function()):向上滑动,slideToggle(事件,function(){}):实现滑动的切换处理实现滑动处理&lt;html&gt;&lt;head&gt; &lt;meta charset="ut...
复制链接

扫一扫