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

Learn More

Shaking animation with jQuery effects [animations]

Forked from How to use the jQuery UI Slider.

6581 Runs 14538 Views 4296 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>Shaking animation with jQuery effects</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;
        }

    </style>

</head>
<body>
    

    <input type="button" value="Shake Box" class="button"  />
    
    <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>

    <script>

        //attach click event to button
        $('.button').click(function(){
            
            /**
             * when button is clicked we call the effect jQuery UI plugin
             * we use the shake effect for one sec
             */
            $("#box").effect('shake', 1000 );

        });

       

    </script>

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

Your session has timed out.

Dismiss (the page may not function properly).