jQuery大法第五式--动画效果

最新推荐文章于 2019-11-10 23:46:57 发布
原创 最新推荐文章于 2019-11-10 23:46:57 发布 · 227 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jQuery #动画效果

一、基本的动画效果

1、隐藏元素

hide():可以用于隐藏元素，将元素CSS样式属性display设置为none，它会记住原先的属性状态。

（1）不带参数

hide()：用于实现不带任何效果的隐藏匹配元素。

（2）带参数

hide(speed,[callback])：用于实现以动画形式隐藏所有匹配的元素，并在隐藏完成后可选择地触发一个回调函数。

speed：动画的时长

callback：可选参数，用于指定动画结束后的回调函数。

2、显示元素

show():可以用于显示元素，将元素CSS样式属性display设置为block或者inline，它会恢复原先的属性状态。

（1）不带参数

show():用于实现不带任何效果的显示匹配元素。

（2）带参数

show(speed,[callback]):用于实现以动画形式显示所有匹配的元素，并在显示完成后可选择地触发一个回调函数。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本动画效果</title>
    <style>
        ul{
            font-size: 12px;
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        li{
            padding: 7px;
        }
        a{
            color: blue;
            text-decoration: none;
        }
        a:hover{
            color: red;
        }
        #menu{
            float: left;
            text-align: center;
            width: 70px;
            height: 295px;
            padding-top: 5px;
            display: none;
            background-image: url(images/menu_bg.gif);
        }
    </style>
</head>
<body>
<span id="box">
    <img src="images/title.gif" width="30" height="80" id="flag" >
    <div id="menu">
        <ul>
            <li><a href="javascript:void(0);">图书介绍</a></li>
            <li><a href="javascript:void(0);">新书预告</a></li>
            <li><a href="javascript:void(0);">图书销售</a></li>
            <li><a href="javascript:void(0);">刊物发布</a></li>
            <li><a href="javascript:void(0);">资料下载</a></li>
            <li><a href="javascript:void(0);">好书推荐</a></li>
            <li><a href="javascript:void(0);">技术支持</a></li>
            <li><a href="javascript:void(0);">联系我们</a></li>
        </ul>
    </div>
</span>
<script src="jquery.js"></script>
<script>
    $(function () {
       $("#box").hover(function () {
           $("#menu").show(300);
       },function () {
           $("#menu").hide(300);
       }) ;
    });
</script>
</body>
</html>

运行结果：

图片素材:https://download.youkuaiyun.com/download/qq_36789311/11566903

3、切换元素的可见状态

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{
 	margin:0; padding:0
}
body{
 	font-size:12px;
}
ul{
 	list-style-type:none
}
a{
 	text-decoration:none; color:#666; font-family:"宋体"
}
a:hover{
 	text-decoration:underline; color:#903;
}
.content{
 	width:600px; 
 	margin:40px auto 0 auto; 
 	border:1px solid #666; 
 	text-align:center
}
.container{
 	border:5px solid #999; 
 	padding:10px;
}
.content ul{
 	padding-left:15px;
  	margin:0 auto;
}
.content .container ul li{ 
	float:left; 
	width:170px; 
	line-height:20px; 
	margin-right:15px;
}
.boxmore{ 
	clear:both; 
	margin-top:60px;
}
.boxmore a{
 	display:block; 
 	border:1px solid #666; 
 	width:120px; 
 	height:30px;
  	margin:0 auto; 
  	line-height:30px; 
  	outline:none;
}
.change a{
 	color:#903; font-weight:bolder;
}
</style>
</head>

<body>
<script type="text/javascript" src="JS/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var it=$(".content ul li:gt(5):not(:last)");
   	it.hide();
	$(".boxmore a").toggle(function(){
		it.show();
		$(".boxmore a").text("精简资源");
		$("ul li").filter(":contains('网页布局精讲'),:contains('PHP视频教程')").addClass("change");	
	},function(){
		it.hide();
		$("ul li").removeClass("change");
		$(".boxmore a").text("显示全部资源");
	});
});
</script>
<div class="content">
  <div class="container">
    <ul>
      <li ><a href="#">HTML5网页基础教程</a><span>(30440) </span></li>
      <li ><a href="#">C#教程</a><span>(27220) </span></li>
      <li ><a href="#">网页布局精讲</a><span>(20808) </span></li>
      <li ><a href="#">MySQL数据库视频教程</a><span>(17821) </span></li>
      <li ><a href="#">DreamWeaver CS6教程</a><span>(12289) </span></li>
      <li ><a href="#">PhotoShop视频教程</a><span>(8242) </span></li>
      <li ><a href="#">PHP视频教程</a><span>(14894) </span></li>
      <li ><a href="#">Java视频教程</a><span>(9520) </span></li>
      <li ><a href="#">建站知识</a><span>(2195) </span></li>
      <li ><a href="#">Java基础教程</a><span>(4114) </span></li>
      <li ><a href="#">JavaScript自学教程</a><span>(12205) </span></li>
      <li ><a href="#">PHP开发宝典</a><span>(1466) </span></li>
      <li ><a href="#">C语言入门与实践</a><span>(3091) </span></li>
      <li ><a href="#">其它资源</a><span>(7275) </span></li>
	  
    </ul>
    <div class="boxmore"> <a href="#"><span>显示全部资源</span></a> </div>
  </div>
</div>
</body>
</html>

二、淡入淡出的动画效果

fadeIn(speed,[callback]):通过增大不透明度实现匹配元素淡入效果

fadeOut(speed,[callback])：通过减小不透明度实现匹配元素淡出效果

fadeTo(speed,opacity,[callback]):将匹配元素的不透明度以渐进的方式调整到指定的参数

示例：将第一个示例代码script部分更改成如下所示：

 $(function () {
       $("#box").hover(function () {
           $("#menu").fadeIn(300);//淡入效果
       },function () {
           $("#menu").fadeOut(300);//淡出效果
       }) ;
  });

效果如下：

三、滑动效果

1、滑动显示效果

slideDown()：会逐渐向下增加匹配的隐藏元素的高度，直到元素完全显示位置。

slideDown(speed,[callback])

2、滑动隐藏效果

slildeUp(): 会逐渐向上减少匹配元素的隐藏高度，直到元素完全隐藏为止。

slideUp(speed,[callback])

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伸缩式导航菜单</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
	dl {
		width: 158px;
		margin:0px;
	}
	dt {
		font-size: 14px;
		padding: 0px;
		margin: 0px;
		width:146px; 			/*设置宽度*/
		height:19px; 			/*设置高度*/
		background-image:url(images/title_show.gif);		/*设置背景图片*/
		padding:6px 0px 0px 12px;
		color:#215dc6;
		font-size:12px;
		cursor:hand;
	}
	dd{
		color: #000;
		font-size: 12px;
		margin:0px;
	 }
	a {
		text-decoration: none;		/*不显示下划线*/
	}
	a:hover {
		color: #FF6600;
	}
	#top{
		width:158px; 			/*设置宽度*/
		height:30px; 			/*设置高度*/
		background-image:url(images/top.gif);		/*设置背景图片*/
	}
	#bottom{
		width:158px; 			/*设置宽度*/
		height:31px; 			/*设置高度*/
		background-image:url(images/bottom.gif);		/*设置背景图片*/
	}
	.title{
		background-image:url(images/title_quit.gif);		/*设置背景图片*/
	}
	.item{
		width:146px; 			/*设置宽度*/
		height:15px; 			/*设置高度*/
		background-image:url(images/item_bg.gif);		/*设置背景图片*/
		padding:6px 0px 0px 12px;
		color:#215dc6;
		font-size:12px;
		cursor:hand;
		background-position:center;
		background-repeat:no-repeat;
	}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("dd").hide(); //隐藏全部子菜单
	$("dt[class!='title']").toggle(
		function(){
		//  slideDown:通过高度变化（向下增长）来动态地显示所有匹配的元素
			$(this).css("backgroundImage","url(images/title_hide.gif)");	//改变主菜单的背景
			$(this).next().slideDown("slow");
		},
		function(){
		//  slideUp:通过高度变化（向上缩小）来动态地隐藏所有匹配的元素
			$(this).css("backgroundImage","url(images/title_show.gif)");	//改变主菜单的背景
			$(this).next().slideUp("slow");
		}
	);
});
</script>
</head>

<body>
<div id="top"></div>
<dl>
	<dt>员工管理</dt>
	<dd>
        <div class="item">添加员工信息</div>
        <div class="item">管理员工信息</div>
	</dd>
	<dt>招聘管理</dt>
	<dd>
        <div class="item">浏览应聘信息</div>
        <div class="item">添加应聘信息</div>
        <div class="item">浏览人才库</div>
	</dd>
	<dt>薪酬管理</dt>
	<dd>
        <div class="item">薪酬登记</div>
        <div class="item">薪酬调整</div>
        <div class="item">薪酬查询</div>
	</dd>
    <dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>
</body>
</html>

3、通过高度的变化动态切换元素的可见性

四、自定义动画效果

1、animate()方法创建自定义动画

animate(params,speed,callback)，使用时必须设置元素的定位属性position为relative或absolute，元素才能动起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: "宋体";
            color: #333333;
        }
        .list,li{
            margin: 0;
        }
        .scroll{
            margin-left: 10px;
            margin-top: 10px;
            width: 270px;
            height: 120px;
            overflow: hidden;
        }
        .scroll li{
            width: 270px;
            height:30px;
            line-height: 30px;
            margin-left: 26px;
        }
        .scroll li a{
            font-size:14px;
            color: #333;
            text-decoration: none;
        }
        .scroll li a:hover{
            color: #66ccff;
        }
    </style>
</head>
<body>
    <table width="270" border="0" cellpadding="0" cellspacing="0" style="margin-left: 12px">
        <tr>
            <td align="left" height="50" style="font-size: 22px;" valign="bottom">即将上线</td>
        </tr>
    </table>
    <div class="scroll">
        <ul class="list">
            <li><a href="#">《霍乱时期的爱情》</a></li>
            <li><a href="#">百年孤独</a></li>
            <li><a href="#">罗宾逊漂流记</a></li>
            <li><a href="#">少年派的奇幻漂流</a></li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
           $(".scroll").hover(function () {
               clearTimeout(timeID);
           },function () {
               timeID = setInterval("autoScroll()",3000);
           });
        });

        function autoScoll() {
            $(".scoll").find(".list").animate({
                marginTop:"-25px"
            },500,function () {
                $(this).css({"margin-top":"0px"}).find("li:first").appendTo(this);
            })
        }

    </script>
</body>
</html>

运行结果：

2、使用stop()方法停止动画

stop(clearQueue,gotoEnd)：

clearQueue表示是否清空尚未执行完的动画队列（true表示清空动画队列）

gotoEnd表示是否让正在执行的动画直接到达动画结束时的状态（true表示直接到达动画结束时的状态）

本期学习到此结束，欢迎各位关注指教。

7、jQuery 动画效果全解析
9o8p7i6u5y的博客
06-25 19
本文全面解析了 jQuery 中的各种动画效果方法，包括基础的隐藏与显示方法（hide 和 show）、淡入淡出（fadeIn 和 fadeOut）、滑动效果（slideToggle）、切换效果（toggle）以及强大的自定义动画方法（animate）。文章通过多个示例代码演示了如何使用这些方法实现丰富的动画效果，并讨论了动画效果的排队执行、CSS 定位对动画的影响以及常见问题的解决方案。此外，还介绍了最佳实践和拓展应用场景，如导航菜单动画和图片轮播效果，帮助开发者提升网页的交互性和用户体验。
【jQuery】第五课——jQuery中的事件和动画
王迪
09-16 1117
知识点：会使用简单事件制作网页效果、会用鼠标事件制作主导航特效、会用键盘事件制作表单特效、会使用hover()方法制作下拉菜单特效、会用鼠标事件及动画制作弹出对话框。 JavaScript 与 HTML 之间的交互是通过用户和浏览器操作页面时引发的事件来处理的，比如：单击按钮提交表单、打开页面弹出对话框、鼠标指针移过时显示下拉菜单等，都是事件对用户操作的处理。虽然传统的 J...
后台导航菜单的简单实现
darkangel07的专栏
04-17 447
做一个简单的后台导航菜单   这个素材来自其它网站： http://www.865171.cn/admin-templates/detail-8329.aspx 下载地址： http://www.865171.cn/admin-templates/download/admin-template-030/admin-templates.rar   我只用了它里面的几张图片和样式，不过比...
jquery简单动画效果（下）
男儿当自强
10-17 462
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(document).ready(function(){ $(":input:eq(0)").click(function(){ $("div").sli
程序员面试之MySQL索引失效，索引失效的原因可能有多种，表数据量过大，当表中的数据量过大时，即使有合适的索引，MySQL仍可能选择全表扫描的方式进行查询，从而导致索引失效，实际情况还可能有其他因素
凯歌技术控团队
08-13 422
面试官：web2022前端面试
收缩式导航菜单
wxc137的专栏
12-21 1383
http://www.w3.org/1999/xhtml">收缩式导航菜单BODY { BACKGROUND: #EEEEFF; MARGIN: 0px; FONT: 9pt 宋体}TABLE { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px}TD { FONT: 12px 宋体}img { BOR
jquery中的动画效果
wu964521的博客
11-10 324
5.2.1隐藏匹配元素 使用hide()方法可以隐藏匹配的元素。hide()方法相当于将元素css样式属性display的值设置为none，他会记住display的值，有两种语法格式，一种是不带参数的形式，用于实现不带任何效果的隐藏匹配元素。 语法格式： hide() 另一种带参数的形式，用于一优雅的动画隐藏所有的元素，并隐藏完成之后触发一个回调函数。 语法格式： hide(speed，[cal...
【掌握jQuery动画】：期末试题中的动态效果破解大法
[【掌握jQuery动画】：期末试题中的动态效果破解大法](https://cdn.educba.com/academy/wp-content/uploads/2020/01/jQuery-fadeOut-1.jpg) # 摘要 本文全面探讨了jQuery动画的原理、方法、技巧及应用实践。通过...
JQuery+API整合包下载 - 掌握前端开发核心技巧
JQuery的目的是让那些经常需要进行DOM操作、事件处理和动画效果的网页开发者的工作变得更加轻松。 #### 核心特性 1. **DOM操作**: JQuery提供了一套易于使用的API来选择和操作DOM元素，包括创建、修改、删除和遍历...
响应式俄罗斯方块游戏：HTML5、CSS3与jQuery实现
HTML5（超文本标记语言第五版）是构建Web页面和Web应用的最新标准。它为网页添加了更多的语义元素，增强了表单控制以及多媒体内容的展现能力。在本项目中，HTML5主要用于构建游戏的基本结构，例如创建游戏区域、得分...
jQuery提示效果代码分享
10-25
里给大家分享几段JQuery提示效果的代码，非常的简单实用，有需要的小伙伴直接拿走吧
JQuery的动画效果
记录移动开发相关的知识
08-16 2298
1、基本的动画效果 2、淡入淡出的动画效果 3、滑动效果 4、自定义的动画效果 基本的动画效果指的就是元素的隐藏和显示。在jQuery中提供了两种控制元素隐藏和显示的方法，一种是分别隐藏和显示匹配元素，另一种是切换元素的可见状态，也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见的。     1．隐藏匹配元素     使用hide()方法可以隐藏匹配的元
5种风格的 jQuery 分页效果【附代码】
aili1947的博客
11-26 163
5种风格的 jQuery 分页效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>j...
JQuery学习笔记(三)——菜单
农夫仔
03-06 1413
1、页面中的菜单项可以通过嵌套的ul和li来表示 2、菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单 3、浏览器中的ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进，Opera浏览器比较特殊，li的标识符和其他浏览器不同 4、list-style属性值为none时，可以清除ul和li前面的小圆点 5
jQuery插件制作方法
weixin_33982670的博客
01-14 329
jQuery插件的开发包括两种： 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为...
前端开发者都应知道的 jQuery 小技巧
极北三少
11-03 443
一个简单技巧的集合，帮你提升 jQuery 技能。 Matt Smith 发起的一个小项目，目前已有 15 个 小技巧。伯乐在线会持续跟进更新。 回到顶部按钮预加载图片检查图片是否加载完毕自动修复损坏的图片Hover 上的 Class 开关禁用 input 字段停止链接加载淡入淡出/滑动开关简单的折叠效果将两个 Div 设为相同高度在新窗口打开外部链接找到文本元素切换可视与隐藏的触发器
JQuery Show()的几种效果 总有一种是你需要的
互联网－从零开始
12-08 1355
http://fruithardcandy.iteye.com/blog/1679751 1 show()方法和hide()方法 $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none，等于$("selector").css("display","none") （
关于jquery和zepto.js判断元素的可见性并显示或隐藏总结
热门推荐
IT界寿险规划师的博客
03-16 1万+
一、使用jquery控制div的显示与隐藏 使用jquery控制div的显示与隐藏，一句话就能搞定，例如： 1.$("#id").show()表示为display：block，    $("#id").hide()表示为display:none; 2.$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值