Hover/FadeTo/Toggle Function Help

Hover/FadeTo/Toggle Function Help

What I am trying to do is create a set of links that when you mouse bover them they fade in, and when you mouse out of them they fade back. Also when you mouse over them I would like a picture to slide from the left, and when you leave slide back. So far I have been able to get this to work with 1 letter and 1 picture.  When I set it up for more than one it slides both pictures at the same time.  The code for it is below:

  1. <html>
  2. <head>
  3. <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script>
  4. <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script>

  6. <style type="text/css">
        .text-slide { display: none; margin: 0px; width: 167px; height: 50px; }
    </style>


  8. <script>
    $(document).ready(function(){
        $(".letterbox-fade").fadeTo(1,0.25);
        $(".letterbox-fade").hover(function () {
          $(this).stop().fadeTo(250,1);
          $(".text-slide").toggle("slide", {}, 1000);
          },
          function() {
            $(this).stop().fadeTo(250,0.25);
            $(".text-slide").toggle("slide", {}, 1000);
        });
    });

    </script>













  10. </head>

  12. <body style="background-color: #181818">
    <table>
    <tr>
    <td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/A-Letterbox-Selected.png" /></div></td>
    <td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td>
    </tr>
    <tr>
    <td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/B-Letterbox-Selected.png" /></div></td>
    <td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td>
    </tr>
    </table>










  13. </body>
    </html>


I know that I can get it to work by setting each picture up with a different class, but that means that I have to set a new toggle everytime I make a new pic. I am trying to keep the lines of code to a minimum so that it doesn't get to confusing.

Any help would be greatly appreciated....