jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法-js教程-PHP中文网

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

黄舟

发布： 2017-06-28 14:12:55

原创

1286人浏览过

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加一句：