convert hover to click event for jquery

Question

I'm trying to convert a hover event for a degraded jquery flip piece of my script. I've done this for the css3d transform but I'm not sure how to convert the hover event for the degraded portion. Here is what I have so far:

if($("html").hasClass("csstransforms3d")){

    $('.card').click(function () {

        if ($(this).hasClass('flip')) {
            $(this).removeClass('flip');
        }
        else {
            $(this).addClass('flip');
        }
    });

    /*
    $('.card').hover(function(){
        $(this).addClass('flip');
    },function(){
        $(this).removeClass('flip');
    });
    */
} 
else{
    // How do I add a click event here instead of hover?
    $('.card').hover(function(){
        $(this).find(".front").animate({top: -190}, 'fast');
    },function(){
        $(this).find(".front").animate({top: 0}, 'fast');
    });
}

How do I convert the hover event for a click event for the degraded section?

@raam86 because both callbacks will be called at once. OP is looking for toggle() event, i think, which is now removed: http://stackoverflow.com/questions/14338078/equivalent-of-deprecated-jquery-toggle-event — A. Wolff, Aug 05 '13 at 12:59
@MightyPork Can't I call a click event like I did for the css3d portion? — Paul, Aug 05 '13 at 13:00
All I want to do is replace the hover event with a click event if possible — Paul, Aug 05 '13 at 13:01
hover has two states - mouseover and mouseout. Click is stateless. — MightyPork, Aug 05 '13 at 13:01

score 3 · Accepted Answer · answered Aug 05 '13 at 13:02

3

If you want to use click, you need to store a state value - you can use .data() to do it

Try something like

$('.card').click(function(){
    var $this = $(this);

    if($this.data('hidden')){
        $this.find(".front").animate({top: -190}, 'fast').data('hidden', false);
    } else {
        $this.find(".front").animate({top: 0}, 'fast').data('hidden', true);
    }

});

answered Aug 05 '13 at 13:02

Arun P Johny

384,651
66
527
531

Looks like a good solution but for some reason the data attribute isn't getting set...any thoughts? – Paul Aug 05 '13 at 13:11
I ended up setting the data attribute first and then checking the state but it's working...Thanks! – Paul Aug 05 '13 at 13:19

convert hover to click event for jquery

1 Answers1