CODEWITHSUNDEEP
jqueryhtml
meestormac
meestormac

Reputation: 33

stopping hover once clicked?

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

Upvotes: 0

Views: 141

Answers (2)

jeffery_the_wind
jeffery_the_wind

Reputation: 18158

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/

Upvotes: 0

Kyle Trauberman
Kyle Trauberman

Reputation: 25684

Remove the hover handler onclick:

$(".overlay").click(function () {
    $(this).unbind("hover");
});

Upvotes: 4

Related Questions