title: javascript 4 buttons, 2 work
body: <p>I have 4 image tags with the <code>id</code>'s of:</p>
  
  <ul>
  <li><code>picture_off</code></li>
  <li><code>picture_on</code></li>
  <li><code>go_forward</code></li>
  <li><code>go_backward</code></li>
  </ul>
  
  <p><code>picture_off</code> and <code>picture_on</code> when clicked work. However, <code>go_forward</code> is supposed to, when clicked, to make a div containing text <code>id="PageOneText"</code> disappear. This does not work.</p>
  
  <pre><code>    $(document).ready(function () {
          $("#picture_off").click(function () {
              $("#MinecraftVideo").animate({
                  opacity: '1.0'
              });
          $("#Floating_Island").animate({opacity: '0'});
          $("#picture_on").animate({opacity: '1'});
          $("#picture_off").animate({opacity: '0'});
          $("#attribute1").animate({opacity: '0'});
          $("#attribute2").animate({opacity: '1'});
          });
      });
  
      $(document).ready(function () {
          $("#picture_on").click(function () {
              $("#MinecraftVideo").animate({
                  opacity: '0'
              });
          $("#Floating_Island").animate({opacity: '1'});
          $("#picture_off").animate({opacity: '1'});
          $("#picture_on").animate({opacity: '0'});
          $("#attribute1").animate({opacity: '1'});
          $("#attribute2").animate({opacity: '0'});
          });
      });
  
      $(document).ready(function () {
          $("#go_forward").click(function () {
              $("#PageOneText").animate({
                  opacity: '0.0'
              });
          $("#go_forward").animate({opacity: '0'});
          $("#go_backward").animate({opacity: '1'});
          });
      });
  </code></pre>