jQuery的动画的显示和隐藏特效

最新推荐文章于 2024-04-04 00:40:51 发布
最新推荐文章于 2024-04-04 00:40:51 发布
阅读量1.5k 收藏
点赞数 2
分类专栏： Java 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63719049/article/details/123662097
版权

jQuery的动画的显示和隐藏特效
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#aa {
				width: 200px;
				height: 200px;
				background-color: red;
			}

			.abc {
				transform: rotate(360deg);
				transition: all 2s;
			}
		</style>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			//加载dom的两种方式
			//js和jQuery
					
			$(function() {
				// 				$("#aa").on("click",function(){
				// 					alert("11");
				// 				})
				// 				$("#aa").bind("mouseover",function(){//事件
				// 					alert("123");
				// 				})
				// 				$("a").hover(function(){
				// 					alert(1);
				// 				},function(){
				// 					alert(2);
				// 				})
				// 				$("a").toggle(function() {//点击事件
				// 					alert(1);
				// 				}, function() {
				// 					alert(2);
				// 				})//1.9以上版本已经被取代为动画事件

				//依次添加点击事件
				// 				$("p").click(function(){
				// 					console.info("p被点击了");
				// 				})
				// 					$("div").click(function(){
				// 						console.info("div被点击了");
				// 						return false;//阻止传播
				// 					})
				// 					$("body").click(function(){
				// 						console.info("body被点击了");
				// 					})


				// 						$("#aa").on("click",function(e){
				// 							console.info(e.pageX,e.pageY);//鼠标点击位置
				// 						})
				// 
				// 				$("#aa").click(function(){
				// 					console.info(111);
				// 					
				// 					$("#aa").unbind("click");//点击事件移除
				// 				})
				//一次性效果
				// 				$("#aa").one("click",function(){
				// 					console.info(11);
				// 				})

				//点击两次可触发
				// 					var i=1;
				// 					$("#aa").click(function(){
				// 						if(i%2==0){
				// 							console.info(123);
				// 						}
				// 						i++;
				// 					})

				// 
				$("#aa").hide();
				$("#a").click(function() {
					$("#aa").show(1000);
				})

				$("#b").click(function() {
					$("#aa").hide(1000);
				})
				$("#c").click(function() {
					$("#aa").toggle(1000);
				})


				//展开收入
				// 				$("#aa").hide();
				// 				$("#a").click(function() {
				// 					$("#aa").slideDown(1000);
				// 				})
				// 
				// 				$("#b").click(function() {
				// 					$("#aa").slideUp(1000);
				// 				})
				// 				$("#c").click(function() {
				// 					$("#aa").slideToggle(1000);
				// 				})

				// 淡入淡出
				// 				$("#aa").hide();
				// 				$("#a").click(function() {
				// 					$("#aa").fadeIn(1000);
				// 				})
				// 
				// 				$("#b").click(function() {
				// 					$("#aa").fadeOut(1000);
				// 				})
				// 				$("#c").click(function() {
				// 					$("#aa").fadeToggle(1000);
				// 				})

				// 				$("#d").click(function(){
				// 					$("#aa").animate({
				// 						width:100,
				// 						height:400
				// 					},1000)
				// 				})
				// 			$("#d").click(function(){
				// 				$("#aa").animate({
				// 					left:100,
				// 					top:100
				// 				},2000)
				// 			})
				// 			$("#d").click(function(){
				// 				$("#aa").addClass("abc");
				// 			})


			})
		</script>
	</head>
	<body>
		<button id="a">显示</button>
		<button id="b">隐藏</button>
		<button id="c">显示、隐藏切换</button>
		<button id="d">变</button>
		<a href="#">显示</a>
		<div id="aa" style="text-align: center;position: absolute;">
			<p style="color: yellow;">这是一巴掌</p>
		</div>
	</body>
</html>
追梦梓辰
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery网格马赛克动画显示隐藏图片特效插件.zip
09-25
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
jQuery的隐藏和显示动画效果 及 自定义动画
m0_58679504的博客
07-20 287
show()、hide()、toggle()、slideDown()、slideUp、slideToggle()、fadeIn()、fadeOut()、fadeTo()、fadeToggle()、animate()
jQuery动画效果---隐藏/显示，淡入淡出，滑动，动画
I_am_shy的博客
03-10 457
jquery可以实现很多流畅的动画效果。可以用 animate() 方法来操作所有 几乎所有的CSS 属性
jQuery框架实现元素显示及隐藏动画【附案例分析】，移动端web开发教程
最新发布
2401_84094620的博客
04-04 904
前端校招精编面试解析大全点击这里免费获取完整版pdf查看)][外链图片转存中…(img-Hjz6D5Wa-1712162407438)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-5ZUTfZyU-1712162407438)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
jQuery-动画效果
wsssq_的博客
03-11 149
动画效果、鼠标经过和离开的复合写法、动画队列及停止排队方法、自定义动画animate
Educoder jQuery动画
Junds0的博客
06-10 1859
第1关：jQuery动画效果——隐藏/显示 点击隐藏按钮，橙色小框消失，速度为slow，完成后弹出我隐藏了； 点击显示按钮，橙色小框显示，速度为"1s，完成后弹出我显示了； 点击toggle按钮，第一次点击，橙色小框隐藏显示；第二次点击，橙色小框显示隐藏。效果来回切换，速度为"fast，完成后弹出隐藏显示的切换。 字符串统一用双引号""表示； 点击事件直接写功能即可，即$(selector).click(function(){} <!doctype html> <html lang="en
09-jQuery-动画-显示和隐藏元素
记录java学习日常~
05-24 2474
在 show() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素显示出来，动画完成后执行回调函数。在 slideUp() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素收缩，动画完成后执行回调函数。在 hide() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型隐藏元素，动画完成后执行回调函数。
【jQuery动画】显示与隐藏效果
m0_55394328的博客
10-03 2597
在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
jQuery入门第二章（显示隐藏动画）
m0_56344602的博客
09-06 870
基本概念 隐藏其实就是 display:none; 显示可以有很多种：display:block flex inline-block，block 最常见。 基础显示隐藏 以上方法传入时间后才有动画动画效果，不传入时间没有动画效果。 淡入淡出显示隐藏 就是透明度的变化。 没有传入时间也有动画效果，默认值是 400 毫秒 滑动显示隐藏 高度的变化 自定义动画 核心方法 .animate( 样式对象, 时间, 回调函数 ) 被称为动态的 .css( ) 参考代码 ...
jQuery之动画-显示和隐藏
06-15 427
本质就是给这个元素设置了。
JQUery 动画——隐藏和显示
专注Java（全栈）应用开发，求知若渴，虚心若愚，而知也无涯
03-17 332
切换3个布局：根据formid进行切换： <div id = "doorInfo" class="panel panel-default doorinfo" style="display:none"> <div class="panel-heading">门信息</div> <div class="panel-body"> ...
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
10-23
主要介绍了jQuery动画显示和隐藏效果实现方法,并附带了demo源码供读者下载参考,涉及jQuery操作图片的显示,隐藏及淡入淡出等效果,需要的朋友可以参考下
JQuery动画与特效实例分析
12-09
本文实例分析了JQuery动画与特效的用法。分享给大家供大家参考。具体分析如下： 显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms...
jQuery网格马赛克动画显示隐藏图片特效插件
06-11
这是一款可以将图片以马赛克方式动画显示和隐藏的jQuery网格图像动画特效插件。
jquery动画显示隐藏的图片标题
06-11
默认一张图片，底部说明文字隐藏，当鼠标移动到图片上（鼠标hover）的时候，图片向上移动，底部显示说明文字，鼠标移走后文字消失
jQuery动画的显示与隐藏效果！
xiaoxijinger的博客
07-20 432
jQuery中用于控制元素显示和隐藏效果的方法如表1所示。 表1 控制元素的显示和隐藏 在表1中，参数speed表示动画的速度，可设置为动画时长的毫秒值(如1000)，或预定的3种速度(slow、fast和normal);参数easing表示切换效果，默认效果为swing，还可以使用linear效果;参数fn表示在动画完成时执行的函数。 下面通过代码演示show()、hide()和toggle()的简单使用。 <style> ```python div { width: 150px; hei
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
商务合作 / 项目定制开发 / 前端一对一培训、答疑
09-23 718
show、hide是在特定时间内同时改变了该元素的宽度、高度、透明度。让其具有过渡效果（动画效果）。 淡入淡出（显示和隐藏元素），只改变该元素的透明度。淡入：显示、淡出：隐藏。
jQuery动画（显示隐藏，淡入淡出，滑动）
TangJing_的博客
07-30 2704
目录 分类 基本动画函数 显示元素 交替显示隐藏 滑动效果 向上收缩效果 向下展开效果 交替伸缩样式 淡入淡出效果 淡入效果 淡出效果 自定义不透明度 jQuery的动画函数 分类 基本动画函数：既有透明度渐变，又有滑动效果。是最常用的动画效果函数 滑动动画函数：仅使用滑动渐变效果 淡入淡出动画函数：仅使用透明度渐变效果 基本动画函数 显示元素 jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数，他的动画效果是向左上..
JQuery动画操作
weixin_70676044的博客
10-16 876
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()；//属性值的变化，时间，动画效果，动画完成之后的回调函数});
可以用jQuery实现表单滑出特效吗
06-02
是的，您可以使用 jQuery 实现...同时，我们使用了 CSS 的 `transition` 属性来设置表单滑出和隐藏的过渡动画效果。 您可以根据需要自定义表单的样式和动画效果，例如改变表单的位置、大小、背景颜色、字体样式等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值