jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法

来源：动视网责编：小采时间：2020-11-27 20:18:07

jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法

jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法:jQuery中在两个拥有相同mouseover的元素之间移动的问题$('#d11,#d12').on('mouseover',function(){ $('#d2').animate({opacity:'100'}); });如代码所示，在d11,d12之间移动，animate

推荐度：

点击下载本文 文档为doc格式

导读jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法:jQuery中在两个拥有相同mouseover的元素之间移动的问题$('#d11,#d12').on('mouseover',function(){ $('#d2').animate({opacity:'100'}); });如代码所示，在d11,d12之间移动，animate

jQuery中在两个拥有相同mouseover的元素之间移动的问题

$('#d11,#d12').on('mouseover',function(){
 $('#d2').animate({opacity:'100'});
 });

如代码所示，在d11,d12之间移动，animate会执行照成物体一闪一闪的，怎么解决。详细代码如下：

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <style>
 #d1{overflow:hidden;} 
 #d1 div{height:50px;width:50px;float:left;} 
 #d11{background:#F11;} 
 #d12{background:#ff2;} 
 #d2{height:50px;width:100px;background:#000;opacity:0;filter:alpha(opacity=0);} 
 </style>
 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script></head><body>
 <div id="d1">
 <div id="d11"></div>
 <div id="d12"></div>
 </div>
 <div id="d2"></div>
 <script>
 $(document).ready(function(){
 $('#d11,#d12').on('mouseover',function(){
 $('#d2').animate({opacity:'100'});
 });
 $('#d11,#d12').on('mouseout',function(){
 $('#d2').animate({opacity:'0'});
 });
 }); </script></body></html>

// 先终断之前的动画$(document).ready(function(){
 $('#d11,#d12').on('mouseover',function(){
 $('#d2').stop(true).animate({opacity:'100'});
 });
 $('#d11,#d12').on('mouseout',function(){
 $('#d2').stop(true).animate({opacity:'0'});
 });
});

方法1：

不需要js，css加一句：