Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
251 views
in Technique[技术] by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
// 先终断之前的动画
$(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'});
    });
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
...