|
导读网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立... 网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。 jQuery中的动画效果有:slideDown,slideUp等实现滑动效果;fadeIn,fadeToggle等实现淡入淡出的效果jQuery有很多方法可以帮助我们在页面上实现很多有趣好玩的动画效果,而且程序代码简单比用原生态的JavaScript代码实现效果更加方便简洁,今天将在文章中详细和大家介绍几种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>未加效果前
添加效果后
总结:以上就是本篇文章的全部内容了。希望通过本篇文章能够让大家对jQuery的动画效果有一定的了解以及如何去制作我们想要的动画效果。 以上就是jQuery中的动画效果有哪些的详细内容,更多请关注php中文网其它相关文章! 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。 |
温馨提示:喜欢本站的话,请收藏一下本站!