Question

Just a quick question, I have a figure which contain an image and a span with the class overlay. In my js I have that on hover the overlay opacity changes to reveal the content behind the image.

Once the user clicks the image I need the opacity state to remain 1, but the problem is that when the mouse leaves the .overlay area the opacity reverts to 0.

Is there anyway of stopping the hover mid flow?

JS:

$(".overlay").hover(function () {
        $(this).stop().animate({'opacity':'1.0'}, 400);
    }, function () {
        $(this).stop().animate({'opacity':'0'}, 400);
    });

HTML

<figure>
    <div class="contents">
        <img src="images/photo_person.png" alt="Name">
        <div><span class="overlay"><h3>Name/h3> Occupation</span></div>

        <div class="bio">
        <div class="close"><a href="#">x</a></div>
        <div class="scroll-pane">
        <p>Content Text Here</p>
        </div>
        </div> 
</div>
</figure>

Cheers

Answer 1

This should do it:

cool_function($('.overlay'));

function cool_function(selector) {

    $(selector).hover(function() {
        $(this).stop().animate({
            'opacity': '1.0'
        }, 400);
    }, function() {
        $(this).stop().animate({
            'opacity': '0'
        }, 400);
    }).click(function() {
        $(this).unbind('mouseenter mouseleave click');
        $(this).click(function(){
            cool_function($(this));
        });
    });
}​

See the fiddle: http://jsfiddle.net/xEyCB/1/