Question

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

快速悬停并将该元素悬停了十几次......你会发现它会循环播放淡入淡出动画十几次。

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

编辑：代码......

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);
});

使用jQuery防止动画排队

1 个答案: