关于多个animate运行时阻塞的原理及解决方法。-原创手记-慕课网

最近在回答一个学友的问题是遇到一个难题，就是两个animate运行时会出现阻塞，网上查了很多方法都不行，说是单线程的问题，但我始终觉得两个animate是异步的。

先看一下例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      * { margin:0;padding:0;box-sizing:border-box;}
      ul li{
          list-style:none;
          background: #ccc;
          float:left;
          width:50px;
          height:50px;
          margin-left:30px;
          text-align:center;
          line-height:50px;
          cursor:pointer;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <h1>运行效果:</h1>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li> 
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
      $('ul li').on('mouseenter',function(){
            $('ul li').animate({opacity:1},3000);
            $(this).animate({opacity:0.2},3000);
      }) 
    </script>
  </body>
</html>

效果是这样的
图片描述

可以看到淡入和淡出是不会同时执行的。
同一阶级的元素可以这样解决

$(this).animate({opacity:0.2},3000).siblings().animate({opacity:1},3000);

这样就不会阻塞了。

之所以会阻塞，根本原因是animate在运行的时候建立了一个队列，所以第二个函数必须要等第一个函数运行完才能够运行。这是比较完善的解决方法，把他的队列queue取消，jq中同样也是有文档说明的。

$('ul li').animate({opacity:1},{queue:false,duration:3000});
 $(this).animate({opacity:0.2},{queue:false,duration:3000});

这样就完美解决了animate阻塞的问题了。

关于多个animate运行时阻塞的原理及解决方法。原创