• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(十一):jquery动画相关方法与全局属性

    JQuery学习记录(十一):jquery动画相关方法与全局属性

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

      我们介绍了jquery动画的已定义方法和自定义方法,以及jquery的列队动画等。本章我们再来介绍一下jquery动画的其它几个与动画相关的的方法和jquery动画的几个全局属性。

      一、jquery动画相关方法

      1、停止动画方法:stop()

      stop()方法有2个参数:

      参数一:clearQueue,是一个布尔值,为true时,就是清除后面的队列动画;
      参数二:gotoEnd,也是一个布尔值,为true时,就是将正在执行的动画进接跳到列队结束。

      如果stop()方法不带参数,就表示只停止第一个动画列队,后面的继续执行。示例如下:

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

      $(".stop").click(function(){
      $(".box").stop(true,true);
      });

      2、延迟执行动画方法:delay()

      delay方法还一个参数,参数值为毫秒,示例如:

      //开始延迟 1 秒钟,中间延迟 1 秒
      $('.animate').click(function () {
      $('#box').delay(1000).animate({
      'left' : '300px'
      }, 1000);

      $('#box').animate({
      'bottom' : '300px'
      }, 1000);
      });

      3、动画过滤器:

      这个在前面的选择器过滤器中讲过 :animated

      //把正在执行的动画元素背景设置成红色
      $('.button').click(function(){
      $(':animated').css('background', 'red');
      });

      二、jquery动画全局属性:

      1、设置运行帧数:

      设置动画的运行帧数为1000毫秒:

      jquery.fx.interval = 1000; //默认为13毫秒;
      也可以写成:
      $.fx.interval = 1000;

      $(".start").click(function(){
      $(".box").animate({left:"1000px"},5000);
      })

      上面的这个动画时间是5秒,动画运行帧数interval是1秒,这样,动画过程会卡5次。interval的值越大,动画就越卡,反之就越流畅。

      2、关闭动画:

      jquery.fx.off = true;

      因为在比较低端的浏览器中(如IE6容易发生内在泄漏),动画可能会出现异常或错误,这时,我们可能通过判断来关闭动画效果,以达到页面不受太大影响。

      3、animate()方法还有一个参数,easing 运动方式,自带的参数有两个:

      swing(缓动):动画开始和结尾慢,中间快,这个是默认的。
      linear(匀速):默认为 swing。

      $('.button').click(function () {
      $('#box').animate({
      left : '800px'
      }, 'slow', 'swing');
      $('#pox').animate({
      left : '800px'
      }, 'slow', 'linear');
      });

      嗯,到这里,jquery动画的相关知识,就会部介绍完了。如果也想让自己的页面有jquery动画的话,不防试试吧。



      QQ二维码

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

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

    或许你会感兴趣的文章:

    发表评论

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

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