jQuery动画

来源：互联网发布：c语言画玫瑰花程序编辑：程序博客网时间：2024/06/01 09:39
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery动画</title><style type="text/css">  #msg{    border:2px solid #CCC;    width:80px;    height:20px;    line-height:20px;    text-align:center;    position:fixed;    bottom:10px;    right:10px;    background-color:pink;    display:none;  }  /*设置相对/绝对/固定定位才能做出动画效果,动画就是连续改变元素的偏移量*/  img{    position:relative;  }  #gg{    border:2px solid red;    width:200px;    height:100px;    position:fixed;    right:-180px;    top:50px;  }</style><script type="text/javascript" src="../js/jquery-1.11.1.js"></script><script type="text/javascript">  function f1(){    $("img:eq(0)").show("fast",function (){console.log("开始")});   }  function f2(){//fadeOut(执行时间,回调函数)  回调函数:完成时自动调用的函数$("img:eq(0)").hide(3000,function (){console.log("完成")}); //显示与隐藏动画的实现原理://通过定时器(线程)连续改变元素的样式(大小和透明度)//f2相当于主线程,动画相当于支线程//图片动画还未执行完毕此时会直接输出over,使用回调函数可以解决此问题console.log("over");  }  function f3(){$("#msg").fadeIn(1000).fadeOut(2500);  }//animate一般使用前两个参数就足够了  function f4(){$("img:eq(0)").animate({"left":"300px"},2000).animate({"top":"300px"},2000).animate({"left":"0"},2000).animate({"top":"0"},2000);    }    //广告案例,鼠标移入弹出全部,鼠标移出缩回(可用合成事件)  $(function(){$("#gg").hover(  function(){$(this).animate({"right":"0"},500);    },  function(){$(this).animate({"right":"-180px"},1000);    });    });</script></head><body>  <input type="button" value="显示" onclick="f1();"/>  <input type="button" value="隐藏" onclick="f2();"/>  <input type="button" value="删除" onclick="f3();"/>  <input type="button" value="动画" onclick="f4();"/>  <p>    <img src="../images/01.jpg" />  </p>  <div id="msg" >删除成功!</div>  <div id="gg">广告</div>  <h2>最后</h2></body></html>
0 0