您的位置：首页 > Web前端 > JQuery

jQuery动画相关

2016-07-17 14:04 344 查看
 <!doctype html>
 <html
lang="en">
 <head>
 <meta
charset="UTF-8">
 <title>动画相关</title>
 <script
type="text/javascript"
src="../jquery-2.2.3.js"></script>
 <style
type="text/css">
 .div_1{
 width: 300px;
 height: 300px;
 background: red;
 position: absolute;
 left: 300px;
 }
 </style>
 </head>
 <body>
  
 <div
class="div_1">
  
 </div>
  
 <input
type="button"
value="hide"
onclick="fn1(this);" />
 <br />
  
 <input
type="button"
value="show"
onclick="fn2(this);" />
 <br />
  
 <input
type="button"
value="toggle"
onclick="fn3(this);" />
 <br />
  
 <input
type="button"
value="fadeIn"
onclick="fn4(this);" />
 <br />
  
 <input
type="button"
value="fadeOut"
onclick="fn5(this);" />
 <br />
  
 <input
type="button"
value="fadeToggle"
onclick="fn6(this);" />
 <br />
  
 <input
type="button"
value="slideUp"
onclick="fn7(this);" />
 <br />
  
 <input
type="button"
value="slideDown"
onclick="fn8(this);" />
 <br />
  
 <input
type="button"
value="slideToggle"
onclick="fn9(this);" />
 <br />
  
 <input
type="button"
value="animate"
onclick="fn10(this);" />
 <br />
  
 <input
type="button"
value="stop"
onclick="fn11(this);" />
 <br />
  
 <input
type="button"
value="finish"
onclick="fn12(this);" />
 <br />
  
 <input
type="button"
value="delay"
onclick="fn13(this)" />
 <br />
  
  
 <script
type="text/javascript">
 //关闭所有动画 (所有效果会立即执行完毕) 你在配置比较低的电脑上使用jQuery。
  
 jQuery.fx.off = true;
  
 function fn1 (ele) {
 //hide：隐藏元素
  
 $('.div_1').hide("fast");
 }
  
 function fn2 (ele) {
 //show: 显示元素
 // $('.div_1').show();
  
 //可以进行设置毫秒数
 // $('.div_1').show(3000);
  
 //也可以设置关于速度的关键字（字符串）
 // fast: 快速
 // normal: 正常
 // slow: 慢速
 // $('.div_1').show("slow");
  
 //也可以对速度关键字进行额外的修改
 // jQuery.fx.speeds.fast = 100;
 // jQuery.fx.speeds.normal = 500;
 // jQuery.fx.speeds.slow = 2000;
 // $('.div_1').show("slow");
  
 //也可以自定义关于速度的关键字
 jQuery.fx.speeds.lsx = 1000;
 // $('.div_1').show("lsx");
  
 //也可以有第二个参数，第二个参数是动画运行结束后的回调函数
 $('.div_1').show("lsx", function () {
 alert("动画执行完毕！");
 });
 }
  
 function fn3 (ele) {
 //toggle：切换显示或隐藏 1.12版本以后不建议使用了
 $('.div_1').toggle(1000);
 }
  
 function fn4 (ele) {
 //fadeIn: 显示（效果是渐变）
 $('.div_1').fadeIn(1500);
 }
  
 function fn5 (ele) {
 //fadeOut: 隐藏（效果是渐变）
 $('.div_1').fadeOut(1500);
 }
  
 function fn6 (ele) {
 //fadeToggle：切换隐藏和显示（效果是渐变）
 $('.div_1').fadeToggle(500);
 }
  
 function fn7 (ele) {
 //slideUp: 隐藏（效果是从下到上隐藏）
 $('.div_1').slideUp(1000);
 }
  
 function fn8 (ele) {
 //slideDown: 显示（效果是从上到下显示）
 $('.div_1').slideDown(1000);
 }
  
 function fn9 (ele) {
 //slideToggle: 切换显示（效果是拉链效果）
 $('.div_1').slideToggle(1000);
 }
  
 function fn10 (ele) {
 //animate: 之前那些效果本质都是在调用这个animate来实现的。
 /*
 animate()有三个参数
 参数1：设置CSS属性（部分属性，和运动相关属性）
 参数2：设置动画时长
 参数3：动画执行完毕后的回调函数
 */
 $('.div_1').animate({
 // left : "500px"
 //每点一次就移动一下
 left : "+=200px",
 opacity : 0.3
 // background : "blue"
 }, 2000, function () {
 alert("animate动画执行完毕！");
 });
 }
  
 function fn11 (ele) {
 //stop：停止当前元素所运行的动画
 $('.div_1').stop();
 }
  
 function fn12 (ele) {
 //finish: 停止当前元素所运行的动画（但是会立即完成CSS设置的样式）
 $('.div_1').finish();
 }
  
 function fn13 (ele) {
 //delay: 延迟执行 ，可以接受一个参数，延迟多少毫秒后执行
 $('.div_1').fadeOut(1000).delay(2000).slideDown(1000);
 }
  
  
 </script>
 </body>
 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航