эффективно совпадающие пары элементов и применение определенных триггеров парения/анимации для каждой пары

Question

После чистящими межсети, у меня возникли проблемы с поиском эффективного решения следующего вопроса (самая большая проблема, зная, что спросить):

Я пытаюсь найти способ написать более эффективную версию сценария jQuery, найденную на example site (также перечисленные ниже). Самое сложное препятствие, с которым я столкнулся, - это способ динамического сопоставления триггерного элемента (например, .logo_wrap div.logo.img1) с его соответствующим анимирующим элементом ('.sliding_titles .img1').

Я добавил числа в конец div, которые должны быть сопоставлены, я просто не могу найти способ правильно их сопоставить, а затем применить триггер зависания к одной и анимацию скольжения для другой.

Пример сайта, который я создал для этого сообщения, содержит только шесть объектов, однако есть еще один сайт, который нужно сделать для 29 отдельных пар объектов, что в конечном итоге составляет тонну кода.

Пожалуйста, смотрите пример сайта - который отлично работает. Мне просто нужно найти способ более эффективно написать связанный с ним сценарий: http://redesign.mproven.com/sliding_example.html

Любая помощь в этом вопросе очень ценится, спасибо.

Вот простой пример:

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 (в порядке их появления в теге тела):

Во-первых, являются модули контента, которые выскользнуть когда он соответствует логотипу, находится над

<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> 

Затем приходят логотипы, которые - wh ан колебались - запустит это соответствующее содержание DIV выскользнуть (перечисленных выше):

<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

Не знаю о JQuery, но вы можете захватить отн от изображения ДИВ и использовать, чтобы получить соответствующее скольжение заглавие. Можете ли вы изменить html, чтобы у вас были div с идентификаторами?

E.g. <div class="img1" id="slide_youtube"> 

С MooTools вы могли бы сделать что-то вроде этого:

$$('div.logo').each(function(e) {  
    var rel = e.getProperty('rel'); 
    if (n) { 
     $('slide_' + rel).addEvent('mouseover', function() { 

      // etc 

     }); 
    } 
}); 

Угадайте JQuery может сделать то же самое.