最近在回答一个学友的问题是遇到一个难题，就是两个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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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阻塞的问题了。
点击查看更多内容
2人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦