Добрый день! Создаю дизайн кнопки с анимационным эффектом при нажатии, с помощью фильтров svg.
в результате получилось вот это:
http://villabavaria.net/catering/test/
Эффект делаю с помощью библиотеки TweenMax и вот такого скрипта:
function initBt8() {
var bt = $('.component-8')[0];
var turb = $('#filter-ripple-1 feImage')[0];
var dm = $('#filter-ripple-1 feDisplacementMap')[0];
bt.addEventListener('click', function(e) {
TweenLite.set(turb, { attr: { x: isFF ? e.offsetX : e.offsetX + 10, y: isFF ? e.offsetY : e.offsetY + 10, width: 0, height: 0 } });
TweenLite.to(turb, 3, { attr: { x: '-=300', y: '-=300', width: 600, height: 600 } });
TweenLite.fromTo(dm, 2, { attr: { scale: 30 } }, { attr: { scale: 0 } });
});
}
Кнопка имеет разметку:
<a href="#" class="component-8 button button--8" style="filter: url('#filter-ripple-1')">ЗАБРОНИРОВАТЬ</a>
И все вроде бы хорошо но ровно до тех пор пока кнопка на странице одна. Если начинаешь кнопки добавлять, то при нажатии на какую либо из них кроме самой первой, нечего не произойдет, а если нажать на первую, то эффект будет виден на всех кнопках сразу.
Теоретически я понимаю что где-то в скрипте не хватает $(this), но не понимаю куда его нужно приткнуть.
Прошу помощи
