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?

Answer 1

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

});