fading divs over images failing to stay displayed

Question

I have a bunch of images, when I mouse over one of them I want another div to show over each of the others to 'darken' them. It seems to work first image but after that has a mind of its own.

Here's what I've trying:

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

Is there a better way to do this?

UPDATE I think what's happening is that the fadeIn / FadeOut are not finishing

Here's a Fiddle

Answer 1

It helps if you only target the elements you want to change (i.e. the siblings). Also, use .stop() to prevent queing the animations.

$('.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/

---

update

There are issues both with this answer and with @roasted's - my solution has issues if you move the cursor too quickly, while @roasted's will make all the overlays flash off and on again between images. You can avoid both these issues by moving to CSS transitions instead, triggered by class changes manipulated with some simple JS. Check out the following;

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/

Pros: fluid hardware-accelerated animations, will automagically handle start/stop positions of the transitions

Cons: no support in IE9 http://caniuse.com/css-transitions (will fall back to simply showing/hiding the overlays without animating the transition)

Answer 2

Stop current animations, and you could use hover alias:

DEMO

$('.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();
});