Question

I am using the following code to show/hide “pages” on a one page site and wish to implement a transition/easing effect, to soften the page changes. Unfortunately this is beyond my feeble powers.

          <script>
              $(document).ready(function () {
                $("#page1").addClass("makevisible");
                $("#page1next").click(function () {
                    $("#page1").removeClass("makevisible");
                    $("#page2").addClass("makevisible");
                });
              });
          </script>

Any suggestions welcome and thanks in advance.

Answer 1

.fadeIn and .fadeOut sound perfect for this kind of thing. They animate the opacity taking an argument for how long you would like the fade to last and handle the display attribute for showing/hiding from the DOM automatically as well.

http://api.jquery.com/category/effects/fading/

Code for transitions of half a second:

      <script>
          $(document).ready(function () {
            $("#page1").fadeIn(500);
            $("#page1next").click(function () {
                $("#page1").fadeOut(500);
                $("#page2").fadeIn(500);
            });
          });
      </script>