Efficiently matching pairs of elements and applying specific hover trigger/animation to each pair

Question

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:

<div id="sliding_titles" class="sliding_titles">  

<!-- Youtube -->
<div class="img1" rel="slide_youtube">
  <img class="fade_overlay" src="images/sliding_fade_overlay.png" width="100" height="110" />
  <table>
    <tr>
      <td>          
        <img src="images_example/placeholder_100x100.png" width="100" height="100"></td>
      <td>
        <h3>YouTube slideout placeholder content</h3>
        <p>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.</p>
      </td>
    </tr>
  </table>      
</div><!-- end .img1 -->

<div class="img2" rel="slide_facebook"> ... etc ... </div>

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

<div class="logo_wrap">

    <div class="logo img1" rel="youtube">
    </div><!-- end .logo -->

    <div class="logo img2" rel="facebook">
    </div><!-- end .logo -->

    <div class="logo img3" rel="rss">
    </div><!-- end .logo -->

    ... etc ...

</div> 

Answer 1

`

$(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);
    });

`

<div id="sliding_titles" class="sliding_titles">  

<!-- Youtube -->
<div id="content-img1" rel="slide_youtube">
  <img class="fade_overlay" src="images/sliding_fade_overlay.png" width="100" height="110" />
  <table>
    <tr>
      <td>          
        <img src="images_example/placeholder_100x100.png" width="100" height="100"></td>
      <td>
        <h3>YouTube slideout placeholder content</h3>
        <p>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.</p>
      </td>
    </tr>
  </table>      
</div><!-- end .img1 -->

<div id="content-img2" rel="slide_facebook"> ... etc ... </div>


<div class="logo_wrap">

    <div class="logo" id="img1" rel="youtube">
    </div><!-- end .logo -->

    <div class="logo" id="img2" rel="facebook">
    </div><!-- end .logo -->

    <div class="logo" id="img3" rel="rss">
    </div><!-- end .logo -->

    ... etc ...

</div> 

Answer 2

Grekz has made some really good suggestions with regard to html structure. I strongly concur that you should not couple the code with numbered classes!

But I also wanted to give the code a shot as is. So I used the rel to determine which slide to grab.

$(document).ready(function(){

    var slideOpen = function() {
        var $this = $(this),
            $slide = $('#sliding_tile div[rel=slide_' + $this.attr('rel') + ']');

        $this.stop().animate({opacity: 1}, 500);
        $slide.stop().animate({opacity: 1, width: "500px", overflow: "visible" }, 400);
    }

    var slideClosed = function() {
        var $this = $(this),
            $slide = $('#sliding_tile div[rel=slide_' + $this.attr('rel') + ']');

        $this.stop().animate({opacity: 0}, 500);
        $slide.stop().animate({opacity: 0, width: "0px", overflow: "hidden" }, 1);
    }

    $(".logo[rel]").fadeTo("fast", 0).hover(slideOpen, slideClosed);
}

I've also found that relying on hover to turn-elements-off is error prone. You will find that quick mouse movements don't fire the mouseout event as expected. There are some good plugins that will help this.

Hope it helps.