• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(十):jquery实现同一元素的列队动画

    JQuery学习记录(十):jquery实现同一元素的列队动画

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

      在上一章中我们介绍了自定义动画方法animate(),也用它实现一组列队动画。这种情况下,如是同一元素,我们可按顺序或连缀调用;要是不同元素,我们还可用回调函数来实现。但是,如果列队动画太多的话,回调函数使用起来就比较麻烦,而且可读性很差。为了解决这个问题,jQuery 提供了一组专门用于列队动画的方法。

      1、使用queue()方法来实现列队动画。

      案例:使用回调函数列队动画

      $('#box').slideUp('slow').slideDown('slow', function(){
      $(this).css('background', 'orange');
      });

      如上代码,列队不多的情况,还是可以接受的。如查列队多了,就造成可读性不强,后期修改麻烦。

      使用queue()方法来实现列队动画:

      $('#box').slideUp('slow').slideDown('slow').queue(function(){
      $(this).css('background', 'orange');
      });

      这样,slideDown()动画就独立出来了,而CSS样式动画也独立出来了。可读性增强。

      这时,我们又会发现一个问题:在queue()后面添加一个隐藏动画或其它的动画,尽然不能实现。这是queue()的特性导致的。我们可以通过2种方法来解决这种问题。

      方法一、使用 next 参数来实现继续调用列队动画。

      只需给queue()的回调函数传递一个next参数,然后在回调函数体内调用next()方法,就可以在queue()方法后继续添加动画了。如:

      $('#box').slideUp('slow').slideDown('slow').queue(function (next) {
      $(this).css('background', 'orange');
      next();
      }).hide('slow');

      方法2、使用.dequeue()方法执行下一个函数动画

      next函数是jQuery1.4版本以后才出现的,所以之前版本都是使用.dequeue()方法。如:

      $('#box').slideUp('slow').slideDown('slow').queue(function () {
      $(this).css('background', 'orange');
      $(this).dequeue();
      }).hide('slow');

      如果采用顺序调用,那么使用列队动画方法,就非常清晰了,每一段代表一个列队,而回调函数的嵌套就会杂乱无章。

      2、使用顺序调用的列队,逐个执行:

      上面的例子都是连缀执行动画。我们也可以把这些连缀动画拆开,按顺序一个一个地执行。如:

      $('#box').slideUp('slow');
      $('#box').slideDown('slow');
      $('#box').queue(function () {
      $(this).css('background', 'orange');
      $(this).dequeue();
      })
      $('#box').hide('slow');

      3、清除动画列队

      清理动画列队的方法:.clearQueue()。把.clearQueue()放到一个列队的回调函数或.queue()方法里,就可以把剩下的列队给移除掉。如:

      $('#box').slideDown('slow', function () {
      $(this).clearQueue()
      });

      4、获取当前列队的长度,fx 是默认列队的参数

      function count() {
      return $("#box").queue('fx').length;
      }

      在某个动画处调用

      $('#box').slideDown('slow', function () {alert(count());});

      综上所述,jquery列队动画实现起来看是比图简单的,可以达到页面的简单需求,当然,如查需要比较复杂的动画,这些还远远不够的。

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201808076501.html
    本文时间:2018-08-07 11:47:13
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

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

    或许你会感兴趣的文章:

    发表评论

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

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