CODEWITHSUNDEEP
jqueryclickhover
MrCycling
MrCycling

Reputation: 3004

Disabling a jquery hover function with a click function

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>

Upvotes: 1

Views: 2816

Answers (3)

Ketola
Ketola

Reputation: 2767

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.

Upvotes: 3

Ohgodwhy
Ohgodwhy

Reputation: 50767

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;
    });



});

Upvotes: 0

Luke Jakimowicz
Luke Jakimowicz

Reputation: 380

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.

Upvotes: 2

Related Questions