隐藏和显示效果js动画
<div id='ctt' style='margin-left: 50px; color: white'>
<input type="button" name="name" value="show()显示效果" onclick='show3()' />
<input type="button" name="name" value="hide()隐藏效果" onclick='hide3()' />
<input type="button" name="name" value="toggle()隐藏显示自动切换" onclick='toggle3()' />
<input type="button" name="name" value="slideDown()" onclick='slide3()' />
<input type="button" name="name" value="toggle" onclick='toggle3()' />
<input type="button" name="name" value="fadeIn3" onclick='fadeIn3()' />
<input type="button" name="name" value="自定义左到右消失" onclick='animate3()'/>
<input type="button" name="name" value="自定义右到左展开" onclick='animate4()'/>
<div id='div1' style=' color:Yellow; height: 80px; display: none; overflow:hidden'>
<div id="div1span"> I am a div!</div>
</div>
</div>
<script type="text/javascript"> function show3() {
/*【.show(speed,easong,fn)】
会把display为none的div(已经是show的则没有效果),从上到下(同时从左到右)在1000毫秒内展示;
第一个参数: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000);
第二个参数:默认是"swing",可用参数"linear",通常不写;
第三个参数:可写可不写,表示完成后执行函数
局限性:从上到下(同时从左到右),方向的不可控性;
*/
$("#div1").show(1000, "swing", function () { alert("动画显示完成!"); });
}
function hide3() {
/*
hide()同show();
*/
$("#div1").hide(1000, "swing", function () { alert("动画隐藏完成!"); });
}
function toggle3() {
/*
自动判断,是隐藏则显示;是显示则隐藏
*/
$("#div1").toggle(1000, "swing", function () { alert("动画自处理完成!"); });
}
function slide3() {
/*
slideDown()向下显示,show()是水平与垂直方向同时展开,而slideDown是仅仅在垂直方向向下展开;
slideUp()向上隐藏, hide()是水平与垂直两个方向的,而slideUp()仅仅是垂直方向向上收起隐藏
*/
$("#div1").slideDown(1000, "swing", function () { alert("动画显示完成!"); });
}
function toggle3() {
/*
slideToggle垂直方向上自动切换,toggle是水平与垂直两个方向上的,而slideToggle是仅仅垂直方向的。
*/
$("#div1").toggle(1000, "swing", function () { alert("动画显示完成!"); });
}
function fadeIn3() {
/*
fadeIn() 以改变透明度来显示;
fadeOut() 以改变透明度来隐藏;
fadeToggle() 以改变透明度来切换显示隐藏状态;
*/
$("#div1").fadeIn(3000, function () { alert("淡入显示成功!"); });
}
function fadeto3() {
/*
fadeTo() 由指定的时间将透明度改变到指定的透明度
*/
$("#div1").fadeTo(3000, 0.22, function () { alert("透明度改变成功!"); });
}
function animate3() {
/*
animate(params,speed,easing,callback); 样式参数,时间,可选择,函数
其中params要用中括号括起来,可以使用的css样式参数。注意要采用骆驼法则,如font-size要写成fontSize。颜色渐变不支持。
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
*/
$("#div1").animate({"width":"0px","marginLeft":"50px"},3000);
//这样就模拟地呈现出了 自左向右的隐藏
}
function animate4() {
$("#div1").animate({ "": "", "": "" }, 3000);
}
</script> |
隐藏和显示效果js动画的更多相关文章
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- js动画最佳实现——requestAnimationFrame
我们经常用setInterval来实现动画,其实这种做法不是太好,因为不同浏览器的刷新频率也不一样(一般认为设置16为最佳,按每秒60帧算,1000/60≍16.67) var dis = 0,tim ...
- css3动画与js动画的区别
css与 js动画 优缺点比较 我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其 ...
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 显示层封装及实现与优化(无动画+css3动画+js动画)
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
随机推荐
- 开源IDE CodeBlocks的下载安装、配置、简单编程
如果没有集成开发环境(IDE),在linux下开发程序将非常繁琐,IDE是指将编辑.编译.调试等功能集成在一个桌面环境上,这样就大大方便了用户.IDE一般包括代码编辑器.编译器.调试器和图形界面用户工 ...
- RTC之初始化
RTC为了避免初始化一般有3中方法: 一给MCU的VBAT供电,利用MCU的后备寄存器保存已经设置过时间的标志值,RTC初始化时先查询寄存器值如果是已经设置过则不用初始化设置时间 二 当不给VBUAT ...
- Jackson - Quickstart
JSON Three Ways Jackson offers three alternative methods (one with two variants) for processing JSON ...
- MyBatis(3.2.3) - Configuring MyBatis using XML, typeAliases
In the SQL Mapper configuration file, we need to give the fully qualified name of the JavaBeans for ...
- 和阿文一起学H5——音乐素材
国内 1.网易云音乐 http://music.163.com/ 网易云音乐有听歌识曲功能,听几秒中可听出是什么歌. 微信摇一摇也有听歌识曲功能. 2.只要伴奏不要人声 http://5sing.ku ...
- android 获取前台进程
String getTopActivity() { ActivityManager manager = (ActivityManager)getSystemService(ACTIVITY_SERVI ...
- oracle的to_number、to_char、to_date用法
TO_DATE 是把字符串转换为数据库中得日期类型转换函数TO_CHAR 是把日期或数字转换为字符串TO_NUMBER 将字符转化为数字 TO_DATE使用TO_DATE函数将字符转换为日期TO_DA ...
- Factory Method模式
Factory Method(工厂方法)模式属于GoF设计模式中的创建型分组,它用于在不之制定待创建对象的具体类的情况下创建对象.--<asp.net设计模式> 说白了就是一个人想要出国旅 ...
- spring @Resource和@Autowired的区别
@Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按 byName自动注入罢了.@Resource有两个属性是比较重要的,分 ...
- @Autowired与@Resource用法
官方文档中有这样一段话. If you intend to express annotation-driven injection by name, do not primarily use @Aut ...