1

http://samstil.es/

右側の画像にカーソルを合わせると、黒いオーバーレイが表示されます。

その要素にすばやくホバー オンとホバー オフを 12 回繰り返します。フェード アニメーションが 12 回ループすることがわかります。

その「アニメーションキュー」を防ぐ方法はありますか?

編集：コード...

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

1 に答える 1

4

これを試して：

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

$('.about').on('mouseleave', function(){
    $('#img-hover').stop().fadeOut(500);
});
于 2013-08-15T02:50:07.327 に答える