Wijmo UI for the Web
Flipping Actions
Wijmo User Guide > Widgets > FlipCard > FlipCard Concepts > Flipping Actions

How the FlipCard widget flips from the frontPanel to the backPanel is dictated by the animation option. There are several attributes of the animation option that you can change.

disabled

The default value is false, so that you need no extra code to use the flip animation. Set this attribute to true to just show the reverse side of the card with no animation effects.

type

The default value is "flip," and you can use any of the following jQuery UI animation effects in this attribute. See Animation for more details.

  • scroll
  • blind
  • bounce
  • clip
  • drop
  • explode
  • fade
  • fold
  • highlight
  • puff
  • pulsate
  • scale
  • shake
  • size
  • slide

duration

The default value is 500 miliseconds, but you can change the amount of time that you want the flipping action to take with this attribute.

direction

The default value of "horizontal" flips the card side to side. Set this option to "vertical" to flip the card bottom to top instead. Flip the Card Vertically shows this attribute in action.

Example

The example script below changes the duration to two seconds, the direction to vertical, and the type of action to shake. 

Script to initialize the widget and change the animation
Copy Code
<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#flipcard1").wijflipcard({ 
            animation: { 
                duration: 2000,
                direction: "vertical",
                type: "shake"
            }
        });
    });
</script>
See Also

How To

Reference