争怎路由网/网站教程/内容

jQuery中的动画效果有哪一些

网站教程2024-05-02 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
jQuery中的动画效果有：slideDown,slideUp等实现滑动效果；fadeIn,fadeToggle等实现淡入淡出的效果

jQuery有很多方法可以帮助我们在页面上实现很多有趣好玩的动画效果，而且程序代码简单比用原生态的JavaScript代码实现效果更加方便简洁，今天将在文章中详细和大家介绍几种jQuery动画操作的方法，希望对大家的学习有一定的帮助。

jQuery动画

【推荐课程：jQuery动画】

滑动效果

slideDown（）

可以通过高度变化从下往上增大，并且以滑动的方式显示隐藏的内容

$(".btn2").click(function(){
$("p").slideDown();
});

slideUp（）

可以通过高度变化从上往下减小

$("p").slideUp("slow");

slideToggle([speed],[easing],[fn])

通过高度变化来切换所有匹配元素的可见性

例：快速将段落滑上或滑下，之后弹出一个对话框

$("p").slideToggle("fast",function(){
alert("hello world!"）
淡入淡出
fadeIn（）
通过设置不透明度的变化来实现所有匹配元素的淡入效果
例：用200毫秒快速将段落淡入，之后弹出一个对话框
("p").fadeIn("fast",function(){
alert("hello world!");
});
fadeOut（）
通过设置不透明度的变化来实现所有匹配元素的淡出效果
例：用200毫秒快速将段落淡出，之后弹出一个对话框
$("p").fadeOut("fast",function(){
alert("hello world!");
});
fadeTo（）
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框
$("p").fadeTo("fast", 0.25, function(){
alert("hello world!");
});
fadeToggle（）
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
例：用200毫秒快速将段落淡入，之后弹出一个对话框
$("p").fadeToggle("fast",function(){
alert("hello world!");
});
案例：当我们鼠标点击按钮时隐藏的内容显示,并且淡出消失
<body>
       <div id="box">
       <div id="btn">点击这里，显示或隐藏</div>
	<div id="content">jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架)</div>
	</div>
	<script src="jquery/jquery-1.12.4.js"></script>
	<script type="text/javascript">
	     $(function(){
	     	$("#btn").click(function(){
	     		$("#content").slideToggle("slow");
	     		$("#content").fadeToggle("slow");
	     	});
	     });
</script>
未加效果前
Image 11.jpg
添加效果后
GIF1.gif
总结：以上就是本篇文章的全部内容了。希望通过本篇文章能够让大家对jQuery的动画效果有一定的了解以及如何去制作我们想要的动画效果。
以上就是jQuery中的动画效果有哪些的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:jQuery中的动画效果有哪些
 
相关阅读