Efficiently matching pairs of elements and applying specific hover trigger/animation to each pair After scouring the interweb, I am having trouble finding an efficient solution to the following issue (the biggest problem was knowing what to ask):

I'm trying to find a way to write a more efficient version of the jQuery script found on the example site (also listed below). The biggest hurdle I'm facing is figuring out a way to dynamically match a trigger element (for example, .logo_wrap div.logo.img1) with its respective animating element (.sliding_titles .img1).

I've added numbers to the end of the divs that need to be matched, I just can't seem to find a way to properly match them, then apply a hover trigger to one and a slide-out animation to the other.

The example site I've created for this post only lists six objects, however there's another site that needs this to be done to 29 separate pairs of objects - which ends up being a ton of code.

Please see example site - which works fine. I just need to find a way to more efficiently write the script associated with it: http://redesign.mproven.com/sliding_example.html

Any and all help in this matter is greatly appreciated, thank you.

Here's a simple example:

Javascript (jQuery):

$(document).ready(function(){

$('.logo.img1, .logo.img2, ...etc,').fadeTo("fast", 0);

    $(".logo.img1").hover(function() {
    $(this).stop().animate({"opacity": "1"}, "500");
    $('.sliding_titles div.img1').stop().animate({opacity: 1, width: "500px", overflow: "visible" }, 400);
},
function() {
    $(this).stop().animate({"opacity": "0"}, "500");
    $('.sliding_titles div.img1').stop().animate({opacity: 0, width: "0px", overflow: "hidden" }, 1);
});

$(".logo.img2").hover(function() { 

    ... etc.

});


HTML (in the order they appear in the body tag):

First are the content modules that slide out when its matched logo is hovered over:

&lt;div id="sliding_titles" class="sliding_titles"&gt;  

&lt;!-- Youtube --&gt;
&lt;div class="img1" rel="slide_youtube"&gt;
  &lt;img class="fade_overlay" src="images/sliding_fade_overlay.png" width="100" height="110" /&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;          
        &lt;img src="images_example/placeholder_100x100.png" width="100" height="100"&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;h3&gt;YouTube slideout placeholder content&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;      
&lt;/div&gt;&lt;!-- end .img1 --&gt;

&lt;div class="img2" rel="slide_facebook"&gt; ... etc ... &lt;/div&gt;


Then come the logo divs, which - when hovered - will trigger its respective content div to slide out (listed above):

&lt;div class="logo_wrap"&gt;

    &lt;div class="logo img1" rel="youtube"&gt;
    &lt;/div&gt;&lt;!-- end .logo --&gt;

    &lt;div class="logo img2" rel="facebook"&gt;
    &lt;/div&gt;&lt;!-- end .logo --&gt;

    &lt;div class="logo img3" rel="rss"&gt;
    &lt;/div&gt;&lt;!-- end .logo --&gt;

    ... etc ...

&lt;/div&gt;
`

$(function(){

    $('.logo').fadeTo("fast", 0);

    $(".logo").hover(function() {
        $(this).stop().animate({"opacity": "1"}, "500");
        $('.sliding_titles div#content-'+this.id).stop().animate({opacity: 1, width: "500px", overflow: "visible" }, 400);},
    function() {
        $(this).stop().animate({"opacity": "0"}, "500");
        $('.sliding_titles div#content-'+this.id).stop().animate({opacity: 0, width: "0px", overflow: "hidden" }, 1);
    });


`

&lt;div id="sliding_titles" class="sliding_titles"&gt;  

&lt;!-- Youtube --&gt;
&lt;div id="content-img1" rel="slide_youtube"&gt;
  &lt;img class="fade_overlay" src="images/sliding_fade_overlay.png" width="100" height="110" /&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;          
        &lt;img src="images_example/placeholder_100x100.png" width="100" height="100"&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;h3&gt;YouTube slideout placeholder content&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;      
&lt;/div&gt;&lt;!-- end .img1 --&gt;

&lt;div id="content-img2" rel="slide_facebook"&gt; ... etc ... &lt;/div&gt;


&lt;div class="logo_wrap"&gt;

    &lt;div class="logo" id="img1" rel="youtube"&gt;
    &lt;/div&gt;&lt;!-- end .logo --&gt;

    &lt;div class="logo" id="img2" rel="facebook"&gt;
    &lt;/div&gt;&lt;!-- end .logo --&gt;

    &lt;div class="logo" id="img3" rel="rss"&gt;
    &lt;/div&gt;&lt;!-- end .logo --&gt;

    ... etc ...

&lt;/div&gt;