• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(九):jquery自定义动画函数animate

    JQuery学习记录(九):jquery自定义动画函数animate

    作者: 分类:JS应用 点击: 327 次
    wordpress CMS主题:ssmay主题

      前面我们介绍了jquery已定义动画函数。从本章开始,我们来了解一下jquery自定义动画。所谓自定义动画,就是根据自己的需求来设置动画效果。jquery自带有一个自定义动画函数:animate(),我们可以通过这个函数实现不同的自定义动画效果。

      animate函数语法:

      animate({CSS},速度,回调函数}

      第一个参数是必须的,通过CSS来改变元素样式。第二参数速度和第三个参数回调函数是可选的。

      案例1:同步动画:变宽、变高、字体变大、变淡

      $('.animate').click(function () {
      $('#box').animate({
      'width' : '300px',
      'height' : '200px',
      'fontSize' : '50px',
      'opacity' : 0.5
      });
      });

      案例2:同步动画:向右移动

      $('.animate').click(function () {
      $('#box').animate({
      'top' : '300px', //先必须设置 CSS 绝对定位
      'left' : '200px'
      });
      });

      案例3:同步动画:向右移动,点击一下就右移100px

      $('.animate').click(function () {
      $('#box').animate({
      'left' : '+=100px',
      });
      });

      案例4:通过回调函数 实现列队动画

      $(".start").click(function(){
      $(".box").animate({
      left:"200px"
      },function(){
      $(".box").animate({
      top:"200px"
      },function(){
      $(".box").animate({
      opacity:0.5
      },function(){
      $(".box").animate({
      fontSize:"60px",
      width:"500px"
      },2000)
      });
      });
      });
      })

      案例5:在同一个元素基础上,使用连缀,可以实现列队动画

      $(".start").click(function(){
      $(".box").animate({left:"200px"})
      .animate({top:"200px"})
      .animate({opacity:0.3})
      .animate({fontSize:"70px",width:"400px"});
      })

      案例6:在同一个元素基础上,使顺序排列,可以实现列队动画

      $(".start").click(function(){
      $(".box").animate({left:"200px"});
      $(".box").animate({top:"200px"});
      $(".box").animate({opacity:0.3});
      $(".box").animate({fontSize:"70px",width:"400px"});
      })

      jquery自定义动画函数animate()就介绍到这里,如果想实现一些简单的页面动画效果,可以试一试这个函数。



      QQ二维码

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201808066466.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.