Эффективное сопоставление пар элементов и применение определенного триггера / анимации при наведении на каждую пару - PullRequest
Новая
       19

Эффективное сопоставление пар элементов и применение определенного триггера / анимации при наведении на каждую пару

0 голосов
/ 07 февраля 2012

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

Я пытаюсь найти способ написать более эффективныйверсия сценария jQuery, найденная на примере сайта (также приведена ниже).Самым большим препятствием, с которым я сталкиваюсь, является поиск способа динамического сопоставления элемента триггера (например, '.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 (в порядке их появления в теге body):

Первыми являются модули контента, которые выдвигаются приСоответствующий логотип находится над 

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

Затем идут div с логотипом, который - при наведении - будет вызывать выдвижение соответствующего содержимого 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>

1 Ответ

0 голосов
/ 07 февраля 2012

Не знаю много о jQuery, но вы можете взять rel из image-div и использовать его для получения соответствующего скользящего заголовка.Можете ли вы изменить 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 может делать то же самое.

...