jQuery: Showing and hiding images with duration


The jQuery Code START
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
      function showImage() {
        $('#target').show(2000);
      }

      function hideImage()  {
        $('#target').hide(2000, hey);
      }

      function hey() {
        $('#p1').text("Hey, where did it go?");
      }

    </script>
    
    <style type="text/CSS">
        <!--
        .code { color: red; }
        .back { background-color: yellow; }
        .div1 { height:324px;
                width:243px;
                background-image: url(s.gif);
                background-repeat: repeat; }
        -->
   </style>
  </head>

  <body>
    <h1>jQuery: Showing and hiding images with duration</h1>
    <div class="div1">
        <img id="target" src="Image1.jpg" width="324" height="243" />
    </div>
    <br>
    <form action="">
    <input type="button" value="Show" onclick="showImage()"></input>
    <input type="button" value="Hide" onclick="hideImage()"></input>
    </form>
    <br />
    <p id="p1"></p>