Home/ Questions/Q 7539833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T07:29:13+00:00

I am new to Jquery.. I want use bounce effect in my application..I have

  • 0

I am new to Jquery.. I want use bounce effect in my application..I have seen a sample code here.It works there,But when copied and saved in my system its not working. Its giving JS error: Object does not support method / property ‘effect’.

Any ideas?
Here is my code,

<!DOCTYPE>
<html>
<head>
<title>Bounce Effect</title>
   <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
     $(document).ready(function() {

      $("#button").click(function(){
         $("#Target").effect( "bounce", {times:3}, 300 );
      });
   });
   </script>

   <style>
      p {
           background-color:#bca;
           width:200px; 
           border:1px solid green; 
        }
     div{ width:100px; 
            height:100px; 
            background:red;  
        }
  </style>
</head>

<body>

   <p>Click the button</p>
   <button id="button"> Bounce </button>

   <div id="Target" class="target" >
   </div>  
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need the proper library to use those effects.

    In the example you provided there’s a link to JQuery UI, which I believe have the “bounce” effect and .effect function.

    <script type="text/javascript" src="/jquery/jquery-ui-1.7.2.custom.min.js"></script>

    So, after switching out his custom JQuery UI to the one on Google, try this

    <!DOCTYPE>
<html>
<head>
<title>Bounce Effect</title>
   <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script>
     $(document).ready(function() {

      $("#button").click(function(){
         $("#Target").effect( "bounce", {times:3}, 300 );
      });
   });
   </script>

   <style>
      p {
           background-color:#bca;
           width:200px; 
           border:1px solid green; 
        }
     div{ width:100px; 
            height:100px; 
            background:red;  
        }
  </style>
</head>

<body>

   <p>Click the button</p>
   <button id="button"> Bounce </button>

   <div id="Target" class="target" >
   </div>  
</body>

</html>

    You can learn more about it here.
    JQuery and JQuery UI have fairly extensive documentation, so you should read up on them.

    Also, here’s a JSFiddle for you to… fiddle around with.
    It’s useful when you want to make examples or test something fast.

    • 0