Question

We have a gallery, with a caption that fades in when you hover your cursor over the image div. Our next step is to add a button that will show all the captions, so folks can scroll and read without running their cursor all over the screen.

Creating a showall function is easy, but when the cursor passes over any photo, the hover function fires and the caption on that image disappears.

Is there an easy way to have the showall function disable the hover function when the showall is active?

Our basic jquery code is below, .tease is the caption:

$('.tease').hide();
$('.img33, .img40, .img50, .img60').hover(
    function(){ $(this).children('.tease').fadeIn('900'); },
    function(){ $(this).children('.tease').fadeOut('2500'); }
);

The basic html for each image:

<div class="img33">
<img src="../dir/someimage.jpg">
<div class="tease">Tease copy</div>
</div>

Answer 1

You could just define a global variable that you check against in the hover function.

For example

var hoverEnabled = true;

$('.tease').hide();
$('.img33, .img40, .img50, .img60').hover(
    function(){ if(hoverEnabled) $(this).children('.tease').fadeIn('900'); },
    function(){ if(hoverEnabled) $(this).children('.tease').fadeOut('2500'); }
);

$('#showAllButton').click(function() {
    $('.tease').show();
    hoverEnabled = false;
}

Alternatively you could bind your hover event using .bind() and event name (for example hover.showTease) and .unbind() it in your showall function.