jQuery制作动画与特效

最新推荐文章于 2023-08-10 16:36:12 发布
最新推荐文章于 2023-08-10 16:36:12 发布
阅读量313 收藏 1
点赞数
分类专栏： jQuery学习 文章标签： jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengxu0706/article/details/84231441
版权

以下内容以《精通JavaScript+jQuery》书中实例为基础，并且稍加改动过

 

1、伸缩菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>toggle(speed)方法</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation > ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation > ul > li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation > ul > li > a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation > ul > li > a:hover{		/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul{
	list-style-type:none;
	margin:0px;
	padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
	border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
	display:block;
	padding:3px 3px 3px 0.5em;
	text-decoration:none;
	border-left:28px solid #a71f1f;
	border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
	background-color:#e85070;
	color:#FFFFFF;
}
#navigation ul li ul li a:hover{
	background-color:#c2425d;
	color:#ffff00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li:has(ul)").find("ul").hide();//一开始全部隐藏
	$("li:has(ul)").find("ul").prev().click(function(e){//当点到href的时候
		if(this == e.target){
			/**原始方法
			if($(this).next().is(":hidden")){//
				$("li:has(ul)").find("ul").hide();
				$(this).next().show();
			}else{
				$(this).next().hide();				
			}
			*/
			$("li:has(ul)").find("ul").hide();//交替变化
			$(this).next().toggle(500,function(){//动画完成后的回调函数
				//alert(111);
			});//渐变效果toggle(500)，500是毫秒，不加500是直接变没
		}
	});	
});
</script>
</head>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a>
        	<ul>
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul>
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul>
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>

 2、元素显隐的渐入渐出效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>fadeTo()方法</title>
<style type="text/css">
<!--

img{
	border:1px solid #000000;
}
input{
	border:1px solid #000000;
	font-size:13px; padding:2px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	color:#000000;
}
p{
	padding:5px;
	border:1px solid #000000;	/* 添加边框，利于观察效果 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:eq(0)").click(function(){
		$("img").hide(3000);
	});
	$("input:eq(1)").click(function(){
		$("img").show(2000);
	});
	$("input:eq(2)").click(function(){
		$("img").fadeOut(2000);
	});
	$("input:eq(3)").click(function(){
		$("img").fadeIn(2000);
	});	
	$("input:eq(4)").click(function(){
		$("img").fadeTo(1000,0.5);
	});	
	$("input:eq(5)").click(function(){
		$("img").fadeTo(1000,0.0);
	});	
	$("input:eq(6)").click(function(){
		$("img").slideUp(1000);
	});	
	$("input:eq(7)").click(function(){
		$("img").slideDown(1000);
	});		
	
});
</script>
</head>
<body>
<input type="button" value="Hide">
<input type="button" value="Show">
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
	<p><img src="03.jpg"></p>
</body>
</html>

 3、制作伸缩导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的导航条</title>
<style type="text/css">
<!--
body{
	padding:0px; margin:0px;
	background:url(bg3.jpg) no-repeat;
}
#wrapper{min-height:600px;}
#navigation{
	position:absolute;
	top:0px; left:0px;
	margin:0px; padding:0px;
	width:120px; list-style:none;
}
#navigation li{
	position:relative;
	float:left;
	margin:0px; padding:0px;
	height:50px; width:120px;
}
#navigation li a{
	position:absolute;
	display:block;
	top:0px; left:0px;
	height:50px; width:120px;
	line-height:50px;	
	text-align:center;
	color:#FFFFFF;
}
#navigation .nav0 a{background:#F50065;}
#navigation .nav1 a{background:#D60059;}
#navigation .nav2 a{background:#B0004A;}
#navigation .nav3 a{background:#F26B00;}
#navigation .nav4 a{background:#D75F00;}
#navigation .nav5 a{background:#B24F00;}
#navigation .nav6 a{background:#6E8F00;}
#navigation .nav7 a{background:#607D00;}
#navigation .nav8 a{background:#496100;}
#navigation .nav9 a{background:#007f9f;}
#navigation .nav10 a{background:#006b87;}
#navigation .nav11 a{background:#005065;}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("#navigation li").each(function(){
		if(this.className.indexOf("current_page") == -1){//不是当前页
			$("a",this).css("left","-120px");//隐藏到左面
			$(this).hover(function(){
				$("a",this).animate({left:"0px"},"fast");//鼠标放上时显示
			},function(){
				$("a",this).animate({left:"-120px"},"fast");//鼠标移开时隐藏
			});
		}
	});
});
</script>
</head>
<body>
<div id="wrapper">
	<ul id="navigation">
		<li class="nav0 current_page"><a href="#">我的日志</a></li>
		<li class="nav1"><a title="资源下载" href="#">资源下载</a></li>
		<li class="nav2"><a title="相册" href="#">相册</a></li>
		<li class="nav3"><a title="一起走到" href="#">一起走到</a></li>
		<li class="nav4"><a title="从明天起" href="#">从明天起</a></li>
		<li class="nav5"><a title="纸飞机" href="#">纸飞机</a></li>
		<li class="nav6"><a title="下一站" href="#">下一站</a></li>
        <li class="nav7"><a title="门" href="#">门</a></li>
        <li class="nav8"><a title="人文知识" href="#">人文知识</a></li>
        <li class="nav9"><a title="标签记录" href="#">标签记录</a></li>
        <li class="nav10"><a title="友情链接" href="#">友情链接</a></li>
        <li class="nav11"><a title="联系我们" href="#">联系我们</a></li>
	</ul>
</div>
</body>
</html>
 
fengxu0706
关注
专栏目录
jQuery实现简单的动画
m0_46420078的博客
01-08 436
1、显示 / 隐藏 （1）显示：show(speed,[callback]) $('#btn_show').bind('click',function(){ $('#img1').show(3000);//表示在3秒钟内将图片显示出来 }) （2）隐藏：high(speed,[callback]) $('#btn_hide').bind('click',function(){ $('#img1').hide(3000);//表示在3秒钟内将图片显示出来 ...
jQuery动画特效
m0_51281306的博客
03-24 2002
1.1基本动画 hide():隐藏HTML元素 show():显示HTML元素 toggle():show()和Hide()的切换。 语法 $(selector).show(speed,easing,callback) speed 可选。规定显示效果的速度。 可能的值：毫秒 "slow" "fast" easing 可选。规定在动画的不同点上元素的速度。 默认值为 "swing"。 可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动 c
jQuery动画制作
wangbaojun52024029的专栏
01-26 1522
事件的绑定bind(type[,data],fn);type:包括 blur/focus/load/resize/scroll/unload/click/dblclick/mousedown/errormouseup/mousemove/mouseover/mouseout/mouseenter/mouseleave/change/select/submit/keydown/keypr
JQuery——动画效果
TianXuab的博客
08-10 1753
通过使用这些方法，你可以为网页添加流畅的过渡和动态效果，提升用户体验。然而，随着现代 Web 开发的发展，CSS 动画和过渡以及原生 JavaScript 也提供了更多强大的动画效果选项。jQuery 提供了多种动画效果，可以让你在网页中添加平滑的过渡和动态效果。方法可以创建自定义的动画效果，可以定义多个属性和持续时间。方法可以在显示和隐藏之间切换元素的淡入淡出效果。方法可以在显示和隐藏之间切换元素的滑动效果。方法可以实现元素的向上和向下滑动效果。方法可以实现元素的渐隐和渐现效果。
jQuery如何制作动画
weixin_33806509的博客
08-21 131
下面为一组图片（四张）展示 1 2 3 4 页面代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://...
jQuery学习笔记之制作动画与特效
weixin_30756499的博客
08-11 201
制作多级菜单（l1）show()，hide() js代码 $(function () { $("li:has(ul)").click(function (e) { if (this == e.target) { if ($(this).children().is(":hidden")) { $(this).c...
jQuery简单动画与特效
小新的博客
01-05 397
1.显示与隐藏动画 1.1show()与hide()方法,前者为显示,后者为隐藏 show()方法和hide()方法都能动态的改变当前元素的高、宽、不透明度 语法: ①jQuery对象.show(duration,[fn])。 ②jQuery象.hide(duration，[fn]） duration为动画运行时间,[fn]为function，在动画完成时执行的函数 案例:($("div").show("slow")或者$("div").show(600)") 1.2toggle()方法 能动态地改变当
jQuery制作Loading动画特效特效代码
03-20
这个“jQuery制作Loading动画特效特效代码”就是一个很好的解决方案，它能为你的网站增添专业且吸引人的加载效果。 jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和...
jQuery制作Loading动画特效.zip
11-24
这个"jQuery制作Loading动画特效.zip"压缩包内容可能包含了一个使用jQuery实现的加载动画示例，这在网页加载数据或者进行后台操作时，可以提供用户友好的体验。 首先，我们要理解什么是Loading动画。Loading动画，...
用jQuery特效制作一个简单的图像预览
04-07
NULL 博文链接：https://904353524-qq-com.iteye.com/blog/1560519
jQuery卷轴打开动画特效.zip
最新发布
09-22
"jQuery卷轴打开动画特效.zip" 是一个包含jQuery实现的滚动条动画效果的资源包，适用于网页设计者和开发者，以提升用户体验。 这个资源包包括以下四个文件： 1. **index.html**：这是网页的主文件，其中包含了HTML...
常用jQuery动画效果
fan_ge_的博客
05-17 1277
常用jQuery动画效果汇总 jQuery animate() 方法用于创建自定义动画。 语法： $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 接下来进行css样式和html基本布局： <style> #content
Js与Jq实战：第十讲：jQuery制作动画
专科三年的修炼的博客
11-14 268
jq基础
JQuery实现动画
qq_44370455的博客
06-02 354
编写JQ程序在页面实现，点击按钮使页面上的方形到圆形的一个动画效果，颜色由绿色到红色的一个转变，然后以淡出的方式消失。 提示：border-radius属性设置矩形圆角半径，当取值为正方形宽度的1/2时，即为圆形；注意添加颜色插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml
用jQuery制作动画效果
shaddce的博客
05-08 707
（1.） 导入jquery 2. （2.）然后弄个点击事件，在里面加上一个背景颜色，宽高为100像素和70像素，给他个定位（注意，一定要加定位，不加定位动画效果就出不来）。 3. 最后是jquery，给他引入按钮，animate是用来做动画效果的，我给他的高度就是他的动画，opacity是事件，后面的slow是速度。动画效果就这些代码即可。 ...
jquery实现动画效果
qq_41575219的博客
07-30 400
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jq图片的动画效果</title> <script type="text/javascript" src="js/jquery-3.4.1....
10个jQuery特效
weixin_33849942的博客
11-15 263
By sofish jQuery已经不是什么新鲜的事儿，记得第一次听说是在catch the digital flow上。总把它认为是非常难的东西，也就没有认真去了解他了。直到学完CSS的大部分内容，才开始接触这种"write less, do more" 的Javascrīpt框架。今天，这篇文章的最重要内容是来自Web Designer Wall的一篇教程，一篇包含了10个jQuer...
JQuery创建动画效果的方法
ksx2333的博客
04-02 625
JQuery的11个常用的动画效果方法（fadeIn()、fadeOut()、fadeToggle()、slideDown()、slideUp()、slideToggle()、show()、hide() 、toggle()、animate()、stop()。）
JQuery动画特效：渐入渐出与幻灯片效果
"JQuery 动画特效教程，包括渐入渐出、幻灯片效果等" 在IT领域，jQuery是一款非常流行的JavaScript库，它极大地简化了网页的DOM操作和动画效果的实现。本教程聚焦于jQuery中的动画特效，这些特效为网页交互增添了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值