jQuery学习21---简单动画效果,show,hide,slideUp,slideDown,fadeOut,fadeIn

最新推荐文章于 2024-05-16 10:00:15 发布
最新推荐文章于 2024-05-16 10:00:15 发布
阅读量4.3k 收藏
点赞数
分类专栏： jQuery 文章标签： 简单动画效果 show hide slideUp slideDown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zheng0518/article/details/9207851
版权
show(),hide()如果不带参数，则立即显示，或隐藏，如果指定速度参数则会
用指定时间进行动态显示，隐藏，单位为毫秒，也可以使用三个内置的速度
fast(200ms) slow(600ms) normal(400ms)

动画效果还有slideDown,slideUp,fadeOut,fadeIn




<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<title></title>
		<script src="../jquery-1.8.2.js" type="text/javascript"></script>
		<style type="text/css">
			#d1
			{
				width:200px;
				height:200px;
				background-color:red;
			}
		</style>
		<script type="text/javascript">
			//show,hide 等价于style="displya:block/none"
			
			$(function()
			{
				$("#btn1").click(function()
				{
					$("#d1").show("slow");
				});
				$("#btn2").click(function()
				{
					$("#d1").hide();
				});
				$("#btn3").click(function()
				{
					$("#d1").toggle();
				});
				$("#btn4").click(function()
				{
					$("#d1").slideUp(1000);
				});
				$("#btn5").click(function()
				{
					$("#d1").slideDown();
				});
				$("#btn6").click(function()
				{
					$("#d1").slideToggle();
				});
				$("#btn7").click(function()
				{
					$("#d1").fadeOut();
				});
				$("#btn8").click(function()
				{
					$("#d1").fadeIn();
				});
				$("#btn9").click(function()
				{
					$("#d1").stop();
				});
			});
		</script>
	</head>
	<body>
		<div id="d1"></div>
		<input type="button" id="btn1" value="show" />
		<input type="button" id="btn2" value="hide" />
		<input type="button" id="btn3" value="toggle" /><br/>
		<input type="button" id="btn4" value="slideUp" />
		<input type="button" id="btn5" value="slideDown" />
		<input type="button" id="btn6" value="slideToggle" /><br/>
		<input type="button" id="btn7" value="fadeOut" />
		<input type="button" id="btn8" value="fadeIn" />
		<input type="button" id="btn9" value="stop" />
	</body>
</html>


onyas
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery插件库-jquery弹出层 三种弹出效果.zip
03-15
这通常结合`fadeIn()`和`fadeOut()`两个jQuery方法实现。 - **滑动效果**：滑动效果可以是向上、向下、向左或向右滑动。例如，从底部滑出的弹出层，可以先设定其`top`值为负，然后通过`slideDown()`方法使其`top`值...
用css3动画做出从上飞入效果
摸鱼&小生的博客
04-12 2526
用css3动画做出从上飞入效果 用css3做出从上飞入效果： .fadeInDown { animation: fadeInDown 1s; -webkit-animation: fadeInDown 1s; } @keyframes fadeInDown { 0% { margin-top: -200px; opacity: 0; } 100% { margin-top: 0px; opacity:
css3动画（从上、左下、左、右进入页面）
t595981879的博客
11-01 7050
/*动画-start*/ .animated { animation-duration: 1.5s !important; -webkit-animation-duration: 1.5s !important; animation-fill-mode: both !important; -webkit-animation-fill-mode: both !imp...
你真的拿捏 jQuery 四大动画效果了吗？【入门篇超详细 零基础适用】
最新发布
2401_84150165的博客
05-16 324
一：显示与隐藏=========显示与隐藏在前期 jQuery 的文章里我们已经或多或少使用过了，那就是，但是我们只是调用了一下这两个封装好的方法罢了。并没有给其内部设置参数，其实这两个方法是有隐藏参数的，当然 可以带参数可以不带参数。**speed，****，，fn**1.1 显示函数show ( speed，easing，fn )，可以带参数可以不带参数，可以让元素显示，下面代码的意义为，显示的过程为5000毫秒(5秒) ，显示过后会调用回调函数，并且过程以 swing 的方式过渡。
animate.css 动画效果的使用
HouYing
10-27 737
下载安装animate.css 使用BootCDN加速 https://www.bootcdn.cn/ ，下载min版本即可。 在线效果演示：https://daneden.github.io/animate.css/ 重复执行 只需增加infinite即可 <div class="article-box animated fadeIn infinite"></div> 1 这样这个div就回循环执行 fadeIn动画 API Attention seekers bounc.
animate.css的样式汇总
_陌默
07-17 1023
fade: { title: '淡入淡出', fadeIn: '淡入', fadeInDown: '向下淡入', fadeInDownBig: '向下快速淡入', fadeInLeft: '向右淡入', fadeInLeftBig: '向右快速淡入', fadeInRight: '向左淡...
wowjs动画效果
bestyinjun的专栏
08-23 650
wowjs动画效果
jQuery学习动画效果基础
10-30
jQuery学习动画效果基础 jQuery学习动画效果基础是指使用jQuery库来实现网页中的动画效果。动画效果可以丰富网页的交互性和视觉效果，使用户体验更加流畅和自然。本文将详细介绍jQuery学习动画效果基础，并提供相关...
锋利的jQuery---附源码
06-26
5. **jQuery动画**：jQuery的动画功能强大，包括淡入淡出(`fadeIn()`, `fadeOut()`), 滑动(`slideUp()`, `slideDown()`), 自定义动画(`animate()`)等。这些动画效果的源码分析有助于理解动画的工作原理。 6. **Ajax...
jQuery学习笔记之jQuery动画效果
10-26
在探讨jQuery动画效果的实现与应用中，我们可以从基本动画、滑动动画、透明动画这几个方面深入学习。jQuery作为一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互的过程，...
CSS动画animate.css动画效果全集中文解释
走在前端路上的小白
10-27 2936
使用方法$('.aaa').addClass('animated bounce'); bounce                   弹跳，反弹，弹起flash                    闪现，一瞬间，反射pulse                    跳动，脉冲，脉跳rubberBand               橡皮圈，橡皮带shake              
Animation.css学习笔记
weixin_34228617的博客
12-08 436
animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库，便于你在项目中引用。安装npm install animate.css --save 或者 yarn add animate.css 或者直接下载使用在项目中引用&lt;head&gt; &lt;link rel="stylesheet" href="animate.min.css"&gt; &lt;/head...
css3 updown 动画,CSS3 Animation动画库animate.css的使用
weixin_42311022的博客
08-04 403
使用方法：1.引入css样式2.给要动画的元素加上class animated，如果想无限循环动画，可加上class infinite.(animated是每个要进行动画的元素都必须要添加的类)3.再给要执行动画的元素加上你需要的动画类class. 如下：bounceflashpulserubberBandshakeswingtadawobblebounceInbounceInDownbounc...
jQuery之动画效果
ajwqb06628的专栏
12-08 758
jQuery之动画效果 1、show()显示效果 　　语法：show(speed,callback)　　Number/String,Function　speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast"　callback可选,...
jQuery中show、hide与fadeIn、fadeOut与slideUp、slideDown与fadeToggle、fadeTo、Toggle
m0_52228992的博客
05-14 863
show(speed,easing,callback) hide(speed,easing,callback) show和hide主要通过控制css属性整体的高和宽来控制显示和消失 （参数后面有具体介绍） 举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>
JQ show和hide（隐藏显示）、fadeIn和fadeOut（淡入淡出）、slideDown和slideUp（隐藏显示）
boonyaxnn的博客
04-22 3413
一、show和hide（隐藏显示） 1、show:最终状态是 display:block; hide:最终状态是 display:none; 2、语法：show（毫秒数，回调函数） 3、注意： ①当jq对象没有处于最终状态时，当动画执行完毕后，才会触发，回调函数； ②当jq对象处于最终状态时，立马执行，回调函数 ； ③如...
CSS3图片动画展示----心跳
ZKJ0707的博客
11-20 245
我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。 什么是动画？ 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 为了得到最佳的浏览器支持，您应该始终定...
css tip提示动画
yr123456654321的博客
01-25 325
.tipCoin{ position: absolute; z-index: 2; font-size: 3rem; color: #fff; text-align: left; top:39px; left: 33px; background: #A8C71B; padding: 8px 10px; border-radius: 15px; ...
vue 使用animate动画
joan_FontEnd的博客
08-09 7486
vue中使用animate动画的方法，以及animate动画名称
jquery 常用属性和函数 （转载
06-09
jQuery 是一个非常流行的 JavaScript 库，它提供了许多易于使用的属性和函数，以下是常用的属性和函数： 属性： - `text()`：获取或设置元素的文本内容。 - `html()`：获取或设置元素的 HTML 内容。 - `val()`：获取或设置表单元素的值。 - `attr()`：获取或设置元素的属性。 - `prop()`：获取或设置元素的属性，比如 `checked`、`disabled` 等。 - `css()`：获取或设置元素的 CSS 样式。 - `width()`：获取或设置元素的宽度。 - `height()`：获取或设置元素的高度。 - `offset()`：获取元素相对于文档的位置。 - `position()`：获取元素相对于父元素的位置。 函数： - `$(selector)`：选择器，选择一个或多个元素。 - `$(selector).each(function(index, element))`：遍历一个或多个元素，并对每个元素执行一个函数。 - `$(selector).on(event, handler)`：为一个或多个元素绑定事件处理程序。 - `$(selector).off(event, handler)`：移除一个或多个元素的事件处理程序。 - `$(selector).addClass(class)`：为一个或多个元素添加一个或多个类。 - `$(selector).removeClass(class)`：从一个或多个元素中删除一个或多个类。 - `$(selector).toggleClass(class)`：在一个或多个元素中切换一个或多个类。 - `$(selector).fadeIn()`：淡入一个或多个元素。 - `$(selector).fadeOut()`：淡出一个或多个元素。 - `$(selector).slideDown()`：向下滑动一个或多个元素。 - `$(selector).slideUp()`：向上滑动一个或多个元素。 - `$.ajax(options)`：执行异步 HTTP（Ajax）请求。 以上是 jQuery 常用的属性和函数，当然还有很多其他的属性和函数可以使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值