0

I'm using the Flip! plugin to flip a div on click and revert the flip when a user clicks the div again. The code below makes the DIV flip but does not flip it back when you click it again.

JavaScript

$(function(){
$("#flipbox").bind("click",function(){
    $("#flipbox").flip({
        direction:'rl',
        content:'this is my new content',
        onEnd: function(){
            $("#flipbox").bind("click",function(){
                $("#flipbox").revertFlip(); 
            });
        }
    })
    return false;
});

});

HTML

<div id="flipbox">
    Hello! I'm a flip-box! :)
</div>

Appreciate any help.

4

1 に答える 1

1

By putting the state of the flipbox onto the element, I used an if statement to check that state and determine how to flip the box.
JSFiddle:http://jsfiddle.net/HP7mu/
Javascript:

$(function(){
$("#flipbox").bind("click",function(){
    if($(this).data('flipped')!="yes"){
    $("#flipbox").flip({
        direction:'rl',
        content:'this is my new content',
        onEnd: function(){
                $("#flipbox").data('flipped','yes');
        }
    });
    }else{
        $("#flipbox").flip({
        direction:'rl',
        content:'Hello! I\'m a flip-box! :)',
        onEnd: function(){
                $("#flipbox").data('flipped','no');
        }
    });
    }
    return false;
});
});

Html: Same
Note: As demonstrated in the comments below Asad has an even better solution to this by simply using revertFlip to revert the state if the else is triggered in the code.

于 2013-02-28T21:49:57.870 に答える