js动画效果有哪些？javascript动画效果
老铁们，大家好，相信还有很多朋友对于js动画效果有哪些和javascript动画效果的相关问题不太懂，没关系，今天就由我来为大家分享分享js动画效果有哪些以及javascript动画效果的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
jQuery中的动画效果有哪些
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>未加效果前
添加效果后
html5 动画框架有哪些
Ionic
Ionic是一个神奇的框架和强大前端开源系统，使用先进的 web技术比如 CSS、HTML和 JS来创建令人惊叹的手机应用。已经定制了在所有手机设备上的快速操作，并且确保简单的功能和大量的手机组件。
您可以通过一个命令创建来测试和使用基于任何平台上的 ionic应用。此外，该框架为它自己的组件提供了一套 Angular指令（自定义的 HTML元素），从而使它可以简单的编写一行 HTML代码。类似指令，它使用视图动画逻辑，异步通信，Angular的触摸识别和 HTML清洁处理。
Siimpler
Siimpler是一个简单的 HTML开发框架，可以通过选择自己喜欢的部分，来帮助快速又简单的创建 HTML5开发结构。根据项目需求，可运用 Siimpler开发你自己熟悉的前端结构。网络设计者们也可以通过使用 Siimpler框架类的文件和文件夹来无缝的开始一个 web项目。
Foundation
Foundation是世界上最精妙的前端响应框架，同时，它可以兼容所有的浏览器和网络设备。Foundation拥有移动友好型的用户接口，并且获得了许多的原件来帮助你快速又完美的建立一个响应站点。Foundation设置了许多关键的特性，例如 HTML，CSS UI原件，模板，小代码块，含有按钮，表单，字体，导航等功能的响应组件。
LimeJS
针对于所有的最新的桌面浏览器和触屏设备，LimeJS对于有用户经验的游戏开发者而言是最好的和最强大的开发框架。LimeJS对于在线游戏开发而言能够带来更好的功能和更快的开发过程，而且适合所有的浏览器和触屏设备。
Enyo
Enyo是一个开源的 JavaScript框架，该框架能够让你创建顶级的 HTML5应用程序，该应用程序能够运行在各种各样的电子设备上，比如说手机，台式机，笔记本，电视，以及 web应用。对于很多流行的手机公司开发的重要应用都是采用该框架实现的。
.JS有哪些框架
目前来看，JS框架以及一些开发包和库类有如下几个，Dojo、Scriptaculous、Prototype、yui-ext、Jquery、Mochikit、mootools、moo.fx
Dojo（JS library and UI component）：
Dojo是目前最为强大的j s框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛应用在很多项目中，他的UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织方式。用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。
优点：库相当完善，发展时间也比较长，功能强大，据说利用dojo的io.bind()可以实现comet，看见其功能强大非一般，得到IBM和SUN的支持
缺点：文件体积比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，j s语法增强方面不如prototype。
Prototype（JS OO library）：
是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，以prototype为核心，形成了一个外围的各种各样的JS扩展库，是相当有前途的JS底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR集成的AJAX JS库），之上还有 Scriptaculous实现一些JS组件功能和效果。
优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。
缺点：如果说缺点，可能就是功能是他的弱项
Scriptaculous（JS UI component based on prototype）：
Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了，连大名鼎鼎的digg都在用他，可见不一般
优点：基于prototype是最大的优点，由于使用prototype的广泛性，无疑对用户书锦上添花，并且在《ajax in action》中就拿Scriptaculous来讲述js效果
缺点：刚刚兴起，需要时间的磨练
yui-ext(JS UI component)：
基于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。
优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。
缺点：太过复杂，整个界面的构造过于复杂。
Jquery：
jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标，
优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext重用了很多jQuery的函数
缺点：据说太嫩，历史不悠久。
Mochikit：
MochiKit自称为一个轻量级的js框架。MochiKit主要受到 Python和 Python标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM尤其方便，能够以比原始 JavaScript更友好的方式处理 DOM对象。MochiKit.DOM大部分都是针对 XHTML文档定制的，如果与 MochiKit和 Ajax结合在一起，使用 XHTML包装的微格式尤其方便。Mochikit可以直接对字符串或者数字格式化输出，比较实用和方便。它还有自己的 js代码解释器
优点：MochiKit.DOM这部分很实用，简介也是很突出的
缺点：轻量级的缺点
mootools：
MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。
优点：可以定制自己所需要的功能，可以说是prototypejs的增强版。
缺点：不大不小，具体应用具体分析
moo.fx：
moo.fx是一个超级轻量级的javascript特效库（7k）,能够与prototype.js或mootools框架一起使用。它非常快、易于使用、跨浏览器、符合标准，提供控制和修改任何HTML元素的CSS属性，包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。
优点：小块头有大能耐
缺点：这么小了，已经不错了
关于js动画效果有哪些的内容到此结束，希望对大家有所帮助。