JQuery

How to create a bounce effect for object in jQuery?

How to create a bounce effect for object in jQuery?, someone asked me to explain?
By:

In this article we will see how the JQuery UI effect can be combined to create an object that will travel across the page for a particular distance using position method after that it will return to the starting place by bouncing.

 Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>create a bounceeffect for object in jQuery </title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <style type="text/css">
        #travel {
            position: absolute;
            top: 100px;
        }
        #ball {
            width: 70px;
            height: 70px;
            cursor: pointer;
            background: url( http://www.infinetsoft.com/Uploads/20160523103730logosmall.png) no-repeat 0 0;
            border: 1px solid #DED8D8;
        }
    </style>
    <script type="text/javascript">
       $(document).ready(function () {
            $("#ball").click(function () {
                if ($("#travel").position().left> 399) {
                   $("#travel").animate({
                       left: "-=399px"
                   }, 200).find("div").effect("bounce",5000);
               } else {
                   $("#travel").animate({
                       left: "+=200px"
                   }, 200).find("div").effect("shake");
               }

            });
        });
    </script>
</head>
<body style="border: 1px solid #DED8D8; width: 500px; height: 270px; font-family: Arial;">
    <h1 style="color: #841198">create a bounce effect for object in jQuery </h1>
    <div id="travel">
        <div id="ball">
            <!-- -->
        </div>
    </div>
</body>
</html>

Output:

create a bounce effect for object in jQuery

Related Article

Post your comments / questions



Recent Article