Error in Jquery bounce effect

Question

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>

ShadowScripter · Accepted Answer · 2012-02-24T15:16:06.520

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.

score 1 · Answer 2 · answered Feb 24 '12 at 14:50

You're probably forgetting to include this JavaScript file:

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

It's a customized jQuery they used to make the bounce effect work...

You can grab the code here:

http://www.tutorialspoint.com/jquery/jquery-ui-1.7.2.custom.min.js

score 1 · Answer 3 · answered Feb 24 '12 at 14:50

1

$.fn.effect is a jQuery UI method, you need to include jQuery UI on your page to use it.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

answered Feb 24 '12 at 14:50

Kevin B

94,570
16
163
180

score 0 · Answer 4 · edited Feb 25 '12 at 14:43

0

I see that the sample uses these 2 js files:

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

Do you have the functionality of those two files in place?

edited Feb 25 '12 at 14:43

Luke Woodward

63,336
16
89
104

answered Feb 24 '12 at 14:50

BIEG

116
1
3

Error in Jquery bounce effect

4 Answers4