Jquery<5>Jquery动画效果

最新推荐文章于 2022-12-13 13:43:21 发布
最新推荐文章于 2022-12-13 13:43:21 发布
阅读量397 收藏
点赞数
分类专栏： JQuery java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wicycc/article/details/42193595
版权
java 同时被 2 个专栏收录
31 篇文章 0 订阅
订阅专栏
JQuery
6 篇文章 0 订阅
订阅专栏

Jquery  隐藏与显示 DOM

Jquery  淡入和淡出 DOM

Jquery  滑动 DOM

Jquery 动画

Jquery callBack 回调方法

Jquery 暂停动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#b1").click(function(){
			$("#p1").show();
		});
		
		$("#b2").click(function(){
			$("#p1").hide();
		});
		
		$("#b3").click(function(){
			$("#d1").fadeOut();
		});
		
		$("#b4").click(function(){
			$("#d1").fadeIn();
		});
		
		$("#b5").click(function(){
			//$("#d1").fadeToggle();最普通
			//$("#d1").fadeToggle("fast");快慢设置slow;
			//设置时间10S;
			$("#d1").fadeToggle(10000);
		});
		
		$("#b6").click(function(){
			$("#d1").fadeTo("slow",0.1);
			$("#d2").fadeTo("slow",0.5);
			$("#d3").fadeTo("slow",0.9);
		});
		
		$("#b7").click(function(){
			$("#d4").slideDown("slow");
		});
		$("#b8").click(function(){
			$("#d4").slideUp("slow");
		});
		
		$("#b9").click(function(){
			$("#d5").animate({left:'500px'},'fast');
		});
		$("#b10").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,
				height:'200px',
				width:'200px',
				},3000);
		});
		$("#b11").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,
				height:'+=200px',
				width:'200px',
				},3000);
		});
		$("#b12").click(function(){
			$("#p2").show(function(){
				alert("小日本出来了")
			});
		});
		$("#b13").click(function(){
			$("#d6").animate({left:'500px'},5000);
		});
		$("#b14").click(function(){
			$("#d6").stop();
		});
	
	});
</script>
</head>
<body>
<input type="button" id="b1" value="出来"/>
<input type="button" id="b2" value="滚"/>
<p id="p1">小日本</p>
<hr/>
<input type="button" id="b3" value="淡出"/>
<input type="button" id="b4" value="淡入"/>
<input type="button" id="b5" value="淡出淡入开关"/>
<input type="button" id="b6" value="透明度"/>
<div id="d1" style="width: 100px;height: 100px;background-color: red;margin: 10px;"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: gray;margin: 10px;"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: yellow;margin: 10px;"></div>
<hr/>
<input type="button" id="b7" value="向下滑动"/>
<input type="button" id="b8" value="向上滑动"/>
<div id="d4" style="background-color: green;display: none;height: 100px;width: 500px;">
	<p>cc</p>
	<p>好好学java</p>
</div>
<hr/>
<input type="button" id="b9" value="向左移动"/>
<input type="button" id="b10" value="动画效果2"/>
<input type="button" id="b11" value="动画效果3"/>
<!-- <div id="d5" style="background-color: black; width: 100px;height: 100px;margin: 10px;position: absolute;"></div> -->
<hr/>
<input type="button" id="b12" value="回调事件"/>
<p id="p2"style="display: none;">小日本</p>
<hr/>
<input type="button" id="b13" value="向左移动"/>
<input type="button" id="b14" value="停止"/>
<div id="d6" style="background-color: black; width: 100px;height: 100px;margin: 10px;position: absolute;"></div>
</body>
</html>


wicycc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中的事件处理与动画效果
小王的博客
07-25 1119
jQuery的事件处理、 jQuery的事件对象、 jQuery其他方法、 jQuery动画
jQuery实现简单滚动动画效果
01-19
...<p>持续添加直到出现滚动条</p>... </body> </html> 先添加两个<a>元素作为按钮。然后对<a>元素进行补充： <html> <body> <a>顶部</a> <a>中部</a> ...<p>持续添加直到出现滚动条</p>.....
推荐5个应用 jQuery 特效的精美特效
weixin_33726318的博客
12-21 192
1.jQuery歌词同步的音乐播放器插件 精巧实用 之前我们分享过很多音乐播放器和视频播放器，很多播放器的UI界面都非常酷，特别是利用HTML5和CSS3实现的一些动画特效。今天要分享的一款基于jQuery的音乐播放器，它的特点是歌词和音乐可以同步播放，而且播放器整体非常精巧，适当修改可以作为你博客的播放器挂件。 在线演示 源码下载 2.jQuery美化版下拉框 开放API接口 这是...
Jquery系列（五） 动画效果
我！不一样的烟火
08-14 456
引言： 概述： 内容： 总结：
jQuery学习笔记（三）jQuery动画效果
一叶知秋
09-25 2319
1、对角线动画 效果：让元素在规定时间里沿着左上角来回显示和隐藏 jq对象.show() hide() toggle() 注意： 1. 括号中可以加动画时长（slow normal fast 毫秒数）任一个； 2. fast=200 normal=400 slow=600 3. 默认不做动画 演示： html代码： &lt;body&gt; &lt;input...
jQuery动画效果
m0_51435825的博客
12-13 712
jQuery动画效果
jQuery实现动画效果和导航栏动态显示
1900's 88 keys的博客
01-04 1390
效果 淡入淡出 fadeOut([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数 修改style中的opacity的值由display:block ~ 0 ~ 1 参数： speed:预定字符串(“slow”,“normal”, or “fast”)或者指定数值 easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:回调函数 // 点击按钮div慢慢淡出 $('#b
jQuery的4种常见动画效果
IT00123的博客
08-13 2915
2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。...
jQuery停止动画效果
m0_68277495的博客
04-28 1534
stop() 方法用于停止动画或效果，在它们完成之前。 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 语法： 参数： stopAll：可选，规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许 任何排入队列的动画向后执行。 goToEnd：可选，规定是否立即完成当前动画。默认是 false。 例： jQuery – 链 通过 jQuery，可以把动作/方法链接在一起。链允许我们在一条语句中运行多个 jQuery 方法（在
jQuery 动画效果
qq_49900295的博客
04-01 2515
目录 1.常见的动画效果 2.显示隐藏效果 显示语法规范： 显示参数： 隐藏语法规范： 隐藏参数： 3.滑动效果 停止排队： 4.自定义动画animate 参数： 小案例 1.常见的动画效果 jQuery给我们封装了很多动画效果,最为常见的如下: 显示隐藏 show() hide() toggle() 滑动 slideDown() slideUp() slideToggle() 淡入淡出 fadeIn() fadeOu...
【jQuery动画】显示与隐藏效果
m0_55394328的博客
10-03 2625
在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
简单易用的jQuery页面切换动画效果
06-10
其次，展现的动画效果依赖于CSS3动画，so，新老结合实现的动画效果 使用方法： 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (注意保持图片路径正确即可)
JQuery实现DIV其他动画效果的简单实例
10-21
下面小编就为大家带来一篇JQuery实现DIV其他动画效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery文字切换动画效果
06-10
一款酷酷的jQuery文字切换动画效果，适用于做一些网站口号广告词的广告文字动画切换特效。
Jquery<6>Jquery Ajax
wicycc的专栏
12-27 525
JqueryAjax  简介 Jquery 对 Ajax 操作封装了一套跨浏览器，方便用户使用的 Api JqueryAjax Load  方法 远程请求，把请求的数据载入到 DOM 里； load( url , [,data] , [,callback]) Url：请求地址 Data:请求参数 Callback:请求完成后的回调方法 jqueryAja
Ajax&Json交互实例
wicycc的专栏
12-17 504
共用的Servlet GetAjaxInfoServlet.java package com.ruanku.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; imp
EL表达式
wicycc的专栏
11-28 498
表达式语言（Expression Language，EL） 百度百科：el 表达式 EL  表达式内置对象              表达式内置对象         说明 1          pageContext               表示 javax.servlet.jsp.PageContext  对象 2          pageScope
jsp的九大内置对象和四大作用域<1>
wicycc的专栏
11-12 488
page只能在页面内传递,设置page范围的数据 key->value    pageConte
javaBean组件<1>
wicycc的专栏
11-13 479
JavaBean 是使用 Java 语言开发的一个可重用的组件，在 JSP 开发中可以使用 JavaBean 减少重复代码，使整个 JSP 代码的开发更简洁。 jsp:useBean  创建 javabean
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery.min.js"></script> </head> <body> <button>下拉滑动</button> <button>上拉滑动</button> <button>切换滑动</button> <br><br> <button>显示</button> <button>隐藏</button> <button>切换</button> <br><br> <button>淡入效果</button> <button>淡出效果</button> <button>淡入淡出切换</button> <button>修改透明度</button> <br><br> <button>自定义动画</button> <br><br> <div></div> </body> <style> div { position: absolute; width: 150px; height: 300px; background-color: pink; display: none; } </style> <script> $(function(){ $("button").eq(10).click(function() { $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }); }); </script> </html>代码有误问题
最新发布
05-30
这段代码中有一个小问题：在 `$("button").eq(10)` 这行代码中，它假设页面上有 11 个 `button` 元素，因此这个代码会选择第 11 个 `button` 元素。但是实际上这个页面上只有 10 个 `button` 元素，因此这行代码会...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值