首页
学
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
享
【享】文件
【享】工具
日记
Me
【Me】我
【Me】留言
老郭博客-程序员客栈
文章模型
下载模型
首页
学
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
享
【享】文件
【享】工具
日记
Me
【Me】我
【Me】留言
首页
学
【学】前端
jQuery基本动画效果
jQuery基本动画效果
发布时间:
2年前
作者:
老郭
热度:
2518 ℃
评论数:
# jQuery基本动画效果 ### 1、 基本动画 <div align=center> <img src="/uploads/images/20180303/5a9a4e60e1c06_28.png" width = "800" alt="图片名称" align=center /> </div> 该动画效果的本质是 宽度、高度、透明度、display 在变化 > 具体实现: ``` <script type="text/javascript"> function f1() { // 隐藏 // $().hide([速度(毫秒),回调函数]); // 回调函数。效果呈现完毕会自动调用函数执行 $('div').hide(3000,function(){ alert('我消失了'); }); } function f2() { // 显示 // $().hide([速度(毫秒),回调函数]); // 回调函数,效果呈现完毕会自动调用函数执行 $('div').show(3000,function(){ alert('我又回来了'); }) } function f3() { $('div').toggle(2000); } </script> <style type="text/css"> div{width: 300px;height: 200px;background-color: green;} </style> </head> <body> <div>today is rain</div> <br> <input type="button" name="隐藏" onclick="f1()"> <input type="button" name="显示" onclick="f2()"> <input type="button" name="开关" onclick="f3()"> </body> 动画处理 show(speed,[callback]) 显示隐藏的匹配元素 hide(speed,[callback]) 隐藏显示的元素 toggle() 切换元素的可见状态 toggle(switch) 根据switch参数切换元素的可见状态 (true为可见。false为隐藏)。 toggle(speed,[callback]) 以优雅的动画切换所有匹配的元素可见状态 ``` ### 2、垂直动画 > 效果的本质:高度、display 在变化 滑动效果,垂直方向隐藏和显示 ``` slideDown(speed,[callback]) 显示元素 slideup(speed,[callback]) 隐藏元素 slideToggle(speed,[callback]) 切换所有匹配元素的可见性 ``` > 具体使用: ``` <script type="text/javascript"> function f1() { // 隐藏 // $().hide([速度(毫秒),回调函数]); // 回调函数。效果呈现完毕会自动调用函数执行 $('div').slideUp(2000); } function f2() { // 显示 // $().hide([速度(毫秒),回调函数]); // 回调函数,效果呈现完毕会自动调用函数执行 $('div').slideDown(2000); } function f3() { //开关效果 //$().slideToggle(速度(毫秒),回调函数); $('div').slideToggle(2000);/*开关效果*/ } $(function () { setInterval("f3()",2000);/*自动执行函数*/ }) </script> <style type="text/css"> div{width: 300px;height: 200px;background-color: green;} </style> </head> <body> <div>today is rain</div> <br> <input type="button" name="隐藏" onclick="f1()"> <input type="button" name="显示" onclick="f2()"> <input type="button" name="开关" onclick="f3()"> </body> ``` ### 3、 颜色渐变动画 >淡入淡出效果 ``` fadeIn(speed,[callback]) 不透明的变化来实现所有匹配元素的淡入效果(显示) fadeOut(speed,[callback]) 通过不透明的变化来实现所有匹配元素的淡出效果(隐藏) fadeTo(speed,opacity,[callback]) 把所有匹配元素的透明度以渐进方式调整到指定的不透明度 fadeToggle(speed,[callback]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果 ``` ``` <body> <h2>颜色渐变动画效果</h2> <div style="opacity: 0.8">today is rain</div> <br> <input type="button" name="" onclick="f1()" value="隐藏"> <input type="button" name="" onclick="f2()" value="显示"> <input type="button" name="" onclick="f3()" value="开关"> </body> ``` > 颜色渐变动画效果的实现: ``` <head> <script type="text/javascript"> function f1() { // 隐藏 // $().hide([速度(毫秒),回调函数]); // 回调函数。效果呈现完毕会自动调用函数执行 $('div').fadeOut(2000); } function f2() { // 显示 // $().hide([速度(毫秒),回调函数]); // 回调函数,效果呈现完毕会自动调用函数执行 $('div').fadeIn(2000); } function f3() { //开关效果 //$().slideToggle(速度(毫秒),回调函数); $('div').fadeToggle(2000);/*开关效果*/ } </script> <style type="text/css"> div{width: 300px;height: 200px;background-color: green;} </style> </head> <body> <div>today is rain</div> <br> <input type="button" name="隐藏" onclick="f1()"> <input type="button" name="显示" onclick="f2()"> <input type="button" name="开关" onclick="f3()"> </body> <script type="text/javascript"> function f1() { $('div').hide(2000,f2); } function f2() { $('div').css('background-color','blue') $('div').slideDown(2000,f3); } function f3() { $('div').css('background-color','purple') $('div').fadeToggle(2000,f4); } function f4() { $('div').css('background-color','orange') $('div').fadeToggle(2000,function(){ alert('ok , it fell good') }); } </script> //使用fadeTo()方法给指定的层设置透明度: <script type="text/javascript"> function f1() { //给div层设置指定的透明度 //$('div').fadeTo(2000,透明度 清楚0-1不清楚,回调函数) $('#son').fadeTo(500,0.3); } </script> <style type="text/css"> #pat{width: 400px;height: 300px; background-color: green;} #son{width: 200px; height: 100px; background-color: blue; position: absolute;left: 350px;} </style> </head> <body> <h2>颜色渐变动画效果</h2> <div id="pat"><div id="son">today is rain</div></div> <br> <input type="button" value="触发" onclick="f1()"> </body> ``` <div align=center> <img src="/uploads/images/20180303/5a9a510556c75_45.png" width = "800" alt="图片名称" align=center /> </div>
jQuery,动画
上一篇:
jQuery属性选择器使用
下一篇:
利用Ajax技术实现天气预报接口
栏目导航
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
相关文章
Ajax是什么?
1193 ℃
网站禁止浏览器缓存
1253 ℃
Ajax之get方式请求
2713 ℃
Ajax之post方式请求
2151 ℃
Json使用
1149 ℃
无刷新表单信息提交
1363 ℃
使用Ajax中$.post方法前台获取json数据,将数据转换为...
1736 ℃
细说jQuery的选择器
1342 ℃
jQuery的属性操作
2095 ℃
jQuery快捷操作
1253 ℃
jQuery对象与dom对象关系
3002 ℃
jQuery的事件加载机制
1557 ℃
jQuery属性选择器使用
2167 ℃
jQuery基本动画效果
2518 ℃
利用Ajax技术实现天气预报接口
1413 ℃
微信小程序
手机扫码访问