Как привязать событие 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>
Я знаю, что вы упомянули об этом в своем вопросе, но я не понимаю, почему это не сработает.