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?

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.


<html lang="en">
    <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;
    <script type="text/javascript">
       $(document).ready(function () {
            $("#ball").click(function () {
                if ($("#travel").position().left> 399) {
                       left: "-=399px"
                   }, 200).find("div").effect("bounce",5000);
               } else {
                       left: "+=200px"
                   }, 200).find("div").effect("shake");

<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">
            <!-- -->


create a bounce effect for object in jQuery

Post your comments / questions