禁用带有单击功能的jQuery悬停功能

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.

Answer 2

You can unbind "hover" this way:

$(this).unbind('mouseenter mouseleave');

Just do this when you want to disable the hover. Alternatively, to have greater control and not keep adding and removing events, you may want to introduce a class that is added and removed, and only execute hover actions if certain class is set to the element. Like this:

$(this).hover(
    function() { 
        if ($(".yourElement").hasClass("allowHover")) { 
            ... 
        }  
    },
    function() { 
        if ($(".yourElement").hasClass("allowHover")) { 
            ... 
        }  
    }
 );

Then just add or remove a class and the hover will be enabled or disabled.

Answer 3

var allShown = false;

function showAll(){
    //some imaginary code

    //we're showing all
    allShown = true;
}

This should be ni the scope of the DOM ready.

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

    $('ele').on('something', function(){
        //some code..
        allShown = false;
    });

    //some event to fire the showAll function
    $('ele').on('something', function(){
        showAll();
        allShown = true;
    });



});