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

程序员文章站 2024-02-09 10:07:22

...

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

#d1:hover~#d2{opacity:1}

不过得注意下d1宽度……

方法2：
加个新类.opa1{opacity:1}然后用addClass和removeClass做。

animate前先stop掉动画。或者用封装好的.hover()

以上就是jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法的详细内容，更多请关注其它相关文章！