show('slide') effect on repeat?

I have a hidde开发者_开发技巧n div which I would like to slide upwards on hover over on another div.

$('.gallery-single a').mouseenter(function(){
    $('.gallery-single-title', this).show('slide', { direction: 'down' }, 1000);
    $('.black', this).css({ opacity: 0 });

});

Now when I hover over, the slide action happens on repeat for some reason, I would like to have it slide upwards only once. Would appreciate any help.

http://jsfiddle.net/cCTpd/2/

I would do this with the hover event and changing the class. I am assuming some of your html structure here. I could answer a bit better if I could see it.

$('.gallery-single a').hover(
    function() {
        if(!$(this).hasClass('slid')) {
            $(this).find('.gallery-single-title').slideUp(1000);
            $(this).find('.black').css({ opacity: 0 });
            $(this).addClass('slid');
        } 
    }, 
    function() {
        $(this).find('.gallery-single-title').slideDown(1000);
        $(this).find('.black').css({ opacity: 1 });
        $(this).removeClass('slid');
    }
);

Update

Here is the updated code to make it behave the way that you want.

http://jsfiddle.net/YJaM5/7/

There is only one change to the javascript above:

$(this).find('.black').animate({ opacity: .5 });

I also recommend setting the event to $('.gallery-single') just in case you ever want to have this effect without the link, but it isn't neccessary.

All the other changes are to the css

.gallery-single {
    display:inline-block; 
    margin: 12px; 
    background:#333;
    width: 300px; 
    height:200px;
    position:relative;
}

.gallery-single img { border:none; }

.black {
    background-color:#000000;
    width:300px;
    height:200px; 
    position:absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

.gallery-single-title {
    font-family: 'ContinuumLightRegular', Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size: 18px;
    padding: 5px 5px 0 5px;
    width:290px;
    height:60px; 
    bottom: 0;
    left:0;
    overflow:hidden;
    color: white;
    background:#00b9e1;
    position:absolute;
    display:none;
}

Let me explain a bit. position:relative; is necessary on .gallery-single to keep it all in a neat package. It allows us to set the bottom property to the title element.

I added opacity: 0.5; to the .black element so we didn't have to use js.

For .gallery-single-title I removed the margin-top and set

bottom: 0;
left:0;

This will slide the title element up and down regardless of the slideUp or slideDown but it doesn't matter because we are achieving the correct effect.

This should work for you now.