CODEWITHSUNDEEP
jquery
Pinkal Mistry
Pinkal Mistry

Reputation: 61

I need to flip a div on hover

I am using flip plugin of jquery. I would like to flip a card(div), after it finished to flip, immediately to revertFlip it. That's what I tried

  $("#flipbox").bind("hover",function(){
    $(this).flip({
        direction:'tb',
        onEnd: function() {
            $(this).revertFlip();
            console.log('when the animation has already ended');

        }
    })
}

Upvotes: 4

Views: 1151

Answers (2)

netwire
netwire

Reputation: 7225

Try this: http://jsfiddle.net/netwire88/NAbZT/16/

$(document).on("click", ".flipbox-forward", function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.flip({
        direction: $this.data("direction"),
        color: $this.data("color"),
        content: $this.data("title"),
        onBefore: function() {
            $this.removeClass('flipbox-forward');
            $this.addClass('flipbox-revert');
        }
    })
});

$(document).on("click", ".flipbox-revert", function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.revertFlip();
    $this.removeClass('flipbox-revert');
    $this.addClass('flipbox-forward');
});​

Upvotes: 1

Teun Pronk
Teun Pronk

Reputation: 1399

try to cheat. Make 2 different classes,

then use the mouseenter event to change class and change it back with the mouseleave event.

at least, thats the kind of stuff I do when im close to my deadlines :P

Upvotes: 0

Related Questions