Speed up development with full-stack environments for every branch.

Learn More

Best jQuery plugin to do a flip effect on a selected element

Forked from How to use the jQuery UI Slider.

6192 Runs 11352 Views 3249 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>Best jQuery plugin to do a flip effect on a selected element</title>
    
    <style>
        body{
            text-align: center;
        }
        
        input{
            margin-top:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }

        #box{
            margin:50px auto;
            width:500px;
            height:100px;
            color:#fff;
            padding:10px;
            background: orange;
        }

        .button2{
            display:none;
        }


    </style>

</head>
<body>
    
    <input type="button" value="Flip Box" class="button"  />
    <input type="button" value="Flip Back" class="button2"  />
    
    <div id="box">Box</div>
    

    <!-- 
        We use Google's CDN to serve the jQuery js libs. 
        To speed up the page load we put these scripts at the bottom of the page 
    -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


    <!-- load flip plugin. You can get latest version from here: http://lab.smashup.it/flip/ -->
    <script src="jquery.flip.min.js"></script>
    
    <script>

        //attach click event to button
        $('.button').click(function(){

            //we add the flip effect to box
            $("#box").flip({content:'Flipped Box'});

            //show flip back button
            $('.button2').show();
        });

        //flip back box
        $('.button2').click(function(){
            $("#box").revertFlip()
        });

    </script>

</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).