Untitled

<html>
  <head>
    <title>Slide Example</title>
    <style>
      .viewport {
        position: relative;
        overflow: hidden;
        width: 150px;
        height: 200px;
        border: 1px solid maroon;
      }

      .box {
        position: absolute;
        width: 150px;
        height: 200px;

        /* All just message formatting. */
        color: white;
        font-weight: bold;
        text-align: center;
      }

      .box p {
        margin: 10px;
        margin-top: 50%;
        font-family: Tahoma;
        font-size: 15px;
      }

      #green {
        top: 0px;
        background-color: darkgreen;
      }

      #red {
        left: 150px;
        background-color: red;
      }

    </style>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript">

      var COUNTER = 1;

      var StatusBox = {
        boxes: ['#green', '#red'],
        currentBox: 0,
        zIndex: 100,
        sliding: false,
        update: function (message) {
          if (!StatusBox.sliding) {
            StatusBox.sliding = true;

            var currentBox = $(StatusBox.boxes[StatusBox.currentBox]);
            var boxIndex = StatusBox.currentBox ? 0 : 1;
            var box = $(StatusBox.boxes[boxIndex]);
            StatusBox.currentBox = boxIndex;

            box.html("<p>" + message + "</p>");
            box.animate({left: 0}, 1500, function () {
              currentBox.hide().css({zIndex: StatusBox.zIndex++, left: 150}).show();
              StatusBox.sliding = false;
            });
          }
        }
      };

    </script>
  </head>
  <body>
    <div class="viewport">
      <div class="box" id="green"><p></p></div>
      <div class="box" id="red"><p></p></div>
    </div>
    <p>
      <a href="#" onclick="StatusBox.update('Updated status of counter = ' + (COUNTER++)); return false;">Update Status</a>
    </p>
  </body>
</html>