JQuery: несколько ролловеров - PullRequest
Новая
       11

JQuery: несколько ролловеров

0 голосов
/ 24 июня 2009

У меня есть несколько DIV, содержащих изображение в каждом. Когда я переворачиваю эти DIV, я хочу, чтобы еще один DIV исчез. Когда я снимаю этот новый DIV, он снова должен исчезнуть. По сути, я хочу что-то вроде сетки миниатюр здесь http://www.visualboxsite.com/

Это код, который я написал: 

<script>
  $(document).ready(function(){

    $("div.projectImage").mouseenter(function () {
      $("div.textRollover").fadeIn(100);
    });

    $("div.textRollover").mouseleave(function () {
      $("div.textRollover").fadeOut(100);
    });

  }); 
</script>

Проблемы с этим:

  • Когда я переворачиваю один из DIV, появляются ВСЕ новые DIV, а не только тот, на котором наведена мышь
  • Многократное наведение мыши на DIV и «выключение» их «укладывает» функции постепенного появления / исчезновения

Может кто-нибудь помочь исправить это?

1 Ответ

2 голосов
/ 24 июня 2009

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

$(".rollMe").hover(
  function(){
    /* 'this' is whichever div.rollMe you are currently
       hovering over at this particular moment */
    $(this).find("div.iFade").fadeIn(100);
  },
  function(){
    $(this).find("div.iFade").fadeOut(100);
  }
);

<div class="rollMe">
  <div class="iFade">

  </div>
</div>
...