stopping hover once clicked?

Go To StackoverFlow.com

0

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

2012-04-05 17:35
by meestormac


0

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/

2012-04-05 17:40
by jeffery_the_wind
Will this not stop the animation altogether though? I want it so if the user clicks again it still works - meestormac 2012-04-05 18:19
@meestormac - Oh OK i didn't see that, I will update the answe - jeffery_the_wind 2012-04-05 18:49
thank you! this works a treat! How would I add the
into the click function? So the figure will fade when close is clicked? - meestormac 2012-04-06 13:46
@meestormac Here it is in this fiddle: http://jsfiddle.net/xEyCB/2 - jeffery_the_wind 2012-04-07 03:07


4

Remove the hover handler onclick:

$(".overlay").click(function () {
    $(this).unbind("hover");
});
2012-04-05 17:37
by Kyle Trauberman