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

Learn More

Creating blink effect using jQuery

Forked from How to use the jQuery UI Slider.

10191 Runs 31183 Views 10816 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>Creating blink effect using jQuery</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="Do a blink effect" 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>

        //DOM loaded 
        $(document).ready(function() {
            
            //attach click event to button
            $('.button').click(function(){
                
                /**
                 * when button is clicked we fade to 10% opacity
                 * and after 100 ms we fade the box back to 100%
                 */
                $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);

            });

           
        });

       

    </script>

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

Your session has timed out.

Dismiss (the page may not function properly).