2

たくさんの画像があります。そのうちの 1 つにマウスを合わせると、別の div を他のそれぞれの上に表示して「暗く」します。最初のイメージは機能しているように見えますが、その後は独自の心があります。

これが私が試したことです：

html:

<div id="hp_imgs">
    <div class="imggHolder">
        <img src="http://9ammusic.com/images/hp/adele.jpg">
        <div class="darkOver"></div>
        <div class="showOver">Adele</div>
    </div>
    <div class="imggHolder">
        <img src="http://9ammusic.com/images/hp/michael-buble.jpg">
        <div class="darkOver"></div>
        <div class="showOver">Michael Buble</div>
    </div>
    <div class="imggHolder">
        <img src="http://9ammusic.com/images/hp/neil-diamond.jpg">
        <div class="darkOver"></div>
        <div class="showOver">Neil Diamond</div>
    </div>
</div>

CSS:

#hp_imgs {
width:66%;
float:right;
display:block;
}

.imggHolder {
width:31%;
float:left;
margin:1%;
position:relative;
cursor:pointer;
}

.showOver {
width:80%;
position:absolute;
bottom:20%;
left:10%;
height:30px;
background:rgba(255, 255, 255, .8);
padding-top:10px;
text-align:center;
display:none;
border-radius:6px;
}

.darkOver {
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
position:absolute;
top:0;
left:0;
display:none;
z-index:10;
}

#hp_imgs img {
float:right;
margin:2px;
border-radius:4px;
display: block;
max-width:100%;
width:auto;
height:auto;
}

JQuery:

$('.imggHolder').mouseenter(function() {
            $(this).find('.showOver').fadeIn();
            $('.darkOver').fadeIn(); // show all darkOver
            $(this).find('.darkOver').hide(); // hide 'this' darkOver
        });

        $('.imggHolder').mouseleave(function() {
            $(this).find('.showOver').fadeOut();
            $('.darkOver').fadeOut();
        });

これを行うより良い方法はありますか？

UPDATEフェードイン/フェードアウトが終了していないことが起こっていると思います

ここにフィドルがあります

4

2 に答える 2

3

変更したい要素 (つまり、兄弟) のみをターゲットにすると役立ちます。また、.stop()アニメーションのキューイングを防ぐために使用します。

$('.imggHolder').mouseenter(function () {
    $(this).find('.showOver').fadeIn();
    $(this).siblings().find('.darkOver').stop().fadeIn();
});

$('.imggHolder').mouseleave(function () {
    $(this).find('.showOver').fadeOut();
    $(this).siblings().find('.darkOver').fadeOut();
});

http://jsfiddle.net/3dWhk/3/

アップデート

この回答と@roastedの両方に問題があります.@roastedは画像間ですべてのオーバーレイを点滅させますが、カーソルをあまりにも速く動かすと私の解決策には問題があります. 単純な JS で操作されるクラス変更によってトリガーされる CSS トランジションに移行することで、これらの問題の両方を回避できます。以下をチェックしてください。

CSS

.showOver,
.darkOver {
    opacity: 0; /* instead of display: none; */
    transition: opacity .5s ease;
}
.visible {
    opacity: 1;
}

js

$('.imggHolder').hover(function () {
    $(this).find('.showOver').addClass("visible");
    $(this).siblings().find('.darkOver').addClass("visible");
}, function () {
    $('.showOver, .darkOver').removeClass("visible");
});

http://jsfiddle.net/3dWhk/7/

長所: 流動的なハードウェア アクセラレーション アニメーション、トランジションの開始/停止位置を自動的に処理します。

短所: IE9 ではサポートされていませんhttp://caniuse.com/css-transitions (トランジションをアニメーション化せずにオーバーレイを表示/非表示にするだけにフォールバックします)

于 2013-07-01T10:44:27.707 に答える
2

現在のアニメーションを停止すると、ホバー エイリアスを使用できます。

デモ

$('.imggHolder').hover(function () {
    $(this).find('.showOver').stop(true,true).fadeIn();
    $('.darkOver').stop(true,true).fadeIn();
    $(this).find('.darkOver').hide();
}, function () {
    $(this).find('.showOver').stop(true,true).fadeOut();
    $('.darkOver').stop(true,true).fadeOut();
});
于 2013-07-01T10:38:40.293 に答える