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

发布于
2017-03-28

$('#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>

javascript

阅读 2.7k

3 个回答

得票最新

idollo

1.4k1210

发布于
2017-03-28

✓ 已被采纳

// 先终断之前的动画
$(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'});
    });
});