jquery - 使用 jQuery 防止动画排队

Question

http://samstil.es/

将鼠标悬停在右侧的图像上，可以看到黑色叠加层出现。

快速地在该元素上悬停和悬停十几次......你会看到它循环播放淡入淡出动画十几次。

有没有办法防止“动画队列”？

编辑：代码...

HTML：

        <div class="about">
            <img src="img/me.jpg">
            <div id="img-hover">
                <a href="#" id="github">GitHub - <i class="icon icon-github"></i></a>
                <a href="#" id="facebook">Facebook - <i class="icon icon-facebook"></i></a>
                <a href="#">LinkedIn - <i class="icon icon-linkedin"></i></a>
            </div>
        </div>

CSS：

    .about {

        #img-hover {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 97%;
            background: #000000;
            border: 1px solid #000;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            opacity: 0.7;
        }
    }

JS：

$('.about').on('mouseenter', function(){
    $('#img-hover').fadeIn(500);
});

$('.about').on('mouseleave', function(){
    $('#img-hover').fadeOut(500);
});

Answer 1

尝试这个：

$('.about').on('mouseenter', function(){
    $('#img-hover').stop().fadeIn(500);
});

$('.about').on('mouseleave', function(){
    $('#img-hover').stop().fadeOut(500);
});