CODEWITHSUNDEEP
jquery
TH1981
TH1981

Reputation: 3193

Hover and mouse over simultaneous jquery effects

I have a button with a hover effect:

$('.donations').hover(function() {
    $(this).find('#donate_expand_top').hide().stop(true, true).animate({
        height: 'toggle'
    }, {
        duration: 200
    });

I now need to add a click effect on the same button so that it's touch-friendly. I understand the concept easy enough using $('.donations').click(function(){... but the problem is in combining these two effects it doesn't work correctly. As soon as I click on the button, i'm also hovering, so it tries to fire both and neither works.

Is there an easy solution to this?

Upvotes: 1

Views: 231

Answers (2)

BumbleB2na
BumbleB2na

Reputation: 10743

This is not the most elegant solution, but it keeps track of user's interaction with the button and fires the click event on hover:

var interactingWithBtn = false;
$('#donate_expand_top').hover(function() {
    if(!interactingWithBtn) {
       interactingWithBtn = true;
        $('#donate_expand_top').trigger('click');
    }
},
function() {
    interactingWithBtn = false;
});

$('#donate_expand_top').click(function() {
    if(!interactingWithBtn)
        interactingWithBtn = true;
    $(this).find('#donate_expand_top').hide().stop(true, true).animate({
        height: 'toggle'
    }, {
        duration: 200
    });
});

Upvotes: 0

circusdei
circusdei

Reputation: 1967

They way I've handled it:

  1. use modernizr to detect if the user's device is touch enabled. You can also use any other way of detecting this.

  2. apply your hover/click binds accordingly.

Upvotes: 1

Related Questions