Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bounce Effect using Jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 683
    Comment on it

    Hello Readers, this blog is on the bouncing effect using jquery in all directions(up, down , right and left).

    I have created four round boxes, on clicking on a box each box will bounce in a different direction and a button on clicking that button all the boxes will bounce.

     

    The Html code is written below. Copy and this code in your HTML file:

    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    
    </head>
    
    
    <body>
    <h2>Bounce Effect</h2>
    
    <div class="main">
    
    <div class="wrapper">
    
        <div id="direction-up" ><h5>On Click Bounce Up</h5></div>
        <div id="direction-left"><h5>On Click Bounce Left</h5></div>
    
    </div>
    
    
    <div class="wrapper">
    
        <div id="direction-right"><h5>On Click Bounce Right</h5></div>
        <div id="direction-down"><h5>On Click Bounce Down</h5></div>
    
    </div>
    
    <br/>
    <input id="direction-all" type="button" value="Click to Bounce All!" class="direction-all"/>
    
    </div>
    
    </body>

     

    The CSS code is written below. Copy this code in your CSS file.

     

    body, input{
        font-family: Calibri, Arial;
    }
    div {
        padding:5px;
        width:150px;
        float:left;
        height:100px;
        text-align:center;
        }
    
    h2{
        text-align:center;
      }
    
    .main {
        float:left;
        margin-left:40%;
        width:350px;
        height:300px;
    }
    
    .wrapper {
        float:left;
        width:330px;
        margin-bottom:5px;
     }
    
    .direction-all {
        background-color:green;
        text-align:center;
        padding:5px;
        color:white;
        margin-top:15px;
    }
    
    #direction-up{
        background-color:#FF5733;
        margin-right:5px;
        border-radius:50px;
    }
    #direction-left {
        background-color:#33FF68;
        border-radius:50px;
    }
    #direction-right {
        background-color:#EE8888;
        margin-right:5px;
        border-radius:50px;
    }
    #direction-down {
        background-color:#ED6DF5;
        border-radius:50px;
    }

     

     

    Now include jquery files in your web page. copy below written  code in between <head> </head> tags

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

     

     

    Last but not the least, write jquery function after body tag is closed, in your web page:

    <script>
    
    
    $(function(){
    
       
        $('#direction-right').click(function () {
              $(this).effect("bounce", { direction:'right', times:10 }, 300);
        });
    
        $('#direction-left').click(function () {
              $(this).effect("bounce", { direction:'left', times:10 }, 300);
        });
    
        $('#direction-down').click(function () {
              $(this).effect("bounce", { direction:'down', times:10 }, 300);
        });
    
        $('#direction-up').click(function () {
              $(this).effect("bounce", { times:10 }, 300);
        });
    
        
        $("#direction-all").click(function(){
            $("div").click();
        });
    });
    
    
    </script>

     

     

    Comment: You can use Bounce effect with effect() method. This method helps in bouncing the element multiple times both vertically or horizontally. Here I gave the direction of the effect , default direction is up and then times to bounce , the default time is 5 and then speed. On click on button " Click to Bounce All", I have call the click function on each div, which results in bouncing all the divs simultaneously.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: