JQuery bounce every 2 seconds, can't get it to work

Question

I am trying to implement a little bounce effect to a template to give it some extra call to action.

I am talking about this template: http://luukratief-design.nl/sim/

What I am trying to accomplish is to let phone nr 2 bounces every 2 seconds.

Now when I tried it on a test, the code works: http://www.luukratief-design.nl/sim/test

I use this snippet to set the function:

setInterval(function() 
    {
      $(".bounceme").effect( "bounce", 
          {times:4}, 100 );
     },2000);

And, I use this to call the function:

<div style="width:100px; height:100px; background-color:#006" class="bounceme">

Now somehow when I try to implement it to my template, I cannot get it to work. I think something conflicts and could use some help please.

Thanks in advance, I already lost 3 hours on this :(

Answer 1

The script tabs.js put jquery into noConflict mode so you can't reference it using the "$" sign. Use

jQuery(".bounceme").effect( "bounce", ...

instead.

Answer 2

Include the correct library (jquery+jqueryUI).

       setInterval(function() 
        {
        $(".bounceme").effect( "bounce", 
        {times:4}, 100 );
         },2000)

http://jsfiddle.net/EJWWh/

Answer 3

Working example http://jsfiddle.net/Y4z43/

I think you forgot to include this in your header. You need to use jQuery UI for the bounce effect, it's not in jquery.

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>