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: stackoverflow.com/questions/14338078/… — A. Wolff
– A. Wolff, Commented Aug 5, 2013 at 12:59

Arun P Johny · Accepted Answer · 2013-08-05 13:02:43Z

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 5, 2013 at 13:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Over a year ago

Looks like a good solution but for some reason the data attribute isn't getting set...any thoughts?

Paul Over a year ago

I ended up setting the data attribute first and then checking the state but it's working...Thanks!

Collectives™ on Stack Overflow

convert hover to click event for jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related