Using bounce effect as a 'page' transition? Or similar effect?

Using bounce effect as a 'page' transition? Or similar effect?

Greetings,

I'm required to create some sliding pages using the bounce effect. I'm very new to handcoding jQuery rather than using tutorials and stripping out code. I've got this far...

   
    
    
  1. $(document).ready(function(){
     
      
        
    $("#button_1").click(function () {
          $("#page_1").effect("bounce", { times:3, direction:"horizontal" }, 200);
          $("#page_2").addClass("hidden");
    });

    $("#button_2").click(function () {
          $("#page_2").effect("bounce", { times:3, direction:"horizontal" }, 200);
          $("#page_1").addClass("hidden");
    });

      });

    <div class="hidden page" id="page_1"><h1>Page 1</h1></div>
    <div class="hidden page" id="page_2"><h1>Page 2</h1></div>
    <a href="#" id="button_1">Page 1</a>
    <a href="#" id="button_2">Page 2</a>
    
     
    2.
and as you can see I'm sure it's a very messy way of doing it (never mind it not working properly).

Hopefully someone can see from the code what I'm trying to achieve and point me in the right direction.

I'm aware of tabs but from what I've read you can't by default use the bounce effect with them.

Any advice appreciated!