Как привязать событие inview к нескольким элементам

Я играю с Velocity.js и jquery.inview, и я хочу, чтобы все заголовки на моей странице слайд-даун, когда они появляются. Этот код отлично работает для первого заголовка:

$('.movies-title').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // element is now visible in the viewport
    if (visiblePartY == 'top') {
      // top part of element is visible
    } else if (visiblePartY == 'bottom') {
      // bottom part of element is visible
    } else {
      // whole part of element is visible
      $(this).velocity("transition.slideDownIn", 500);      
    }
  } else {
    // element has gone out of viewport
    $(this).velocity("reverse");
  }
});

Если я скопирую и вставлю вышеупомянутое несколько раз и заменю .movies-title с классами других названий, это работает так, как я хочу.

Тем не менее, это кажется большим количеством дополнительного кода. Я пытался изменить $('.movies-title') в $(.movies-title, .tv-title, .books-title) но тогда анимация работает только для последнего элемента в списке. Я также попытался добавить новый класс под названием .title на все названия и изменения .movie-title в .title но это тоже не сработало.

Что я делаю неправильно? Как я могу сжать код?

2 ответа

Решение

Попробуйте использовать делегат вместо связывания для кратных. Также создайте единый класс для всех них (я только использовал заголовок)

Ну вот так -

$('body').delegate('.title','inview', function(event, isInView, visiblePartX, visiblePartY) {

Редактировать - извините, неверно связан

см. скрипку http://jsfiddle.net/d1g7sLxq/3/

Лучшее решение - использовать один класс для каждого из этих элементов, поскольку они имеют что-то общее. Вы можете просто добавить title как тип класса и применить его к этому классу.

<div class="title movie-title"></div>

Я знаю, что вы упомянули об этом в своем вопросе, но я не понимаю, почему это не сработает.

Другие вопросы по тегам