星联网络专注帝国CMS二次功能插件开发-精品网站模板站长代码素材

  • 最近更新
  • 模板:33
  • 记录:12641|
  • 插件:52|
  • 工具:4|
  • 代码:8|
  • 评论:0

jQuery动画效果

前言

本文重点解决jQuey动画效果问题,希望能够帮助到你

  jQuery animate() 方法用于创建自定义动画。

  语法:$(selector).animate({params},speed,callback);

  必需的 params 参数定义形成动画的 CSS 属性。

  可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

  可选的 callback 参数是动画完成后所执行的函数名称。

  下面的例子演示 animate() 方法的简单应用;它把元素移动到左边,3秒时间到 left 属性等于 500 像素为止:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>动画</title>
 6     <style>  
 7        *{margin:0;padding:0;}
 8        #div2{width:100px;height:100px;background:orange;position:absolute;}
 9     </style>
10     <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
11     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
12       <script type="text/javascript">
13            $(document).ready(function(){
14              $("#bt1").click(function(){
15                  $("#div2").animate({
16                       left:'500px',
17                       top:'150px',
18                        opacity:'0.5',
19                  },3000);
20              });
21            });
22       </script>
23 </head>
24 <body>
25      <button id="bt1">开始</button>
26      <div id="div2">我是内容</div>
27 </body>
28 </html>

本网刊登的文章均仅代表作者个人观点,并不代表本网立场。文中的论述和观点,敬请读者注意判断。

本文地址:http://www.xlkjgs.com/notes/js/2031.html

以上内容由本站整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

星联网络

星联网络是中国最具实战的互联网创业者的知识服务商,这里有互联网行业动态,网络推广,SEO优化,SEM优化,ESC配置,行业经验分型,互联网项目,微信营销、淘宝客赚钱、新媒体营销、京东运营、跨境电商等众多互联网营销知识分享

站长运营站长必备网站运营之道才能长久发展