Скрипт не работает для нескольких объектов
 

Добрый день! Создаю дизайн кнопки с анимационным эффектом при нажатии, с помощью фильтров 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), но не понимаю куда его нужно приткнуть.

Прошу помощи:help:

Я думаю как-то так надо:

//выбирать надо класс, общий для всех кнопок 
var btn = document.querySelector(".component-8");
[].forEach.call(btn, function(item){
var turb = item.querySelector('#filter-ripple-1 feImage');
var dm = item.querySelector('#filter-ripple-1 feDisplacementMap');
item.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 } });
  });
})

Как-то так...

function initBt8() {
 $('.component-8').each(function(i,bt) {
  var turb = $('#filter-ripple-1 feImage')[i];
  var dm = $('#filter-ripple-1 feDisplacementMap')[i];
  
  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 } });
  });
  
}

TestUser013, Царь Леонид, спасибо за попытку, но не помогло, при чем без каких либо видимых причин, консоль молчит.

Я воспользовался идей, TestUser013, и не много её докрутил, получилось вот так:

function initBt8() {
	$('.component-8').click(function() {
		var bt = $(this)[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 } });
		});
	})
}

В итоге - эффект теперь срабатывает при нажатии на любую из кнопок - и это уже хорошо, НО он и отражается на всех кнопках сразу(

вот пример/

Есть у кого-то какие-то идеи?

Нет, только при нажатии на первую. Попробуйте вот так:

$('.component-8').each(function(i,bt) {
    bt.addEventListener('click', function(e) {
        var turb = $('#filter-ripple-1 feImage')[0];
        var dm = $('#filter-ripple-1 feDisplacementMap')[0];
        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 } });
    });
});

А после этого разбирайтесь как работает TweenLite.

Большое спасибо, заработало. Сейчас буду разбираться с TweenLite.

И пользуясь случаем задам другой вопрос, поскольку уже к этой теме приковано внимание.

Есть самый обычный скрипт который обеспечивает плавную прокрутку при нажатии на якорную ссылку:

$(document).ready(function(){ 
	$('a[href*=#]').bind("click", function(e){ 
		var anchor = $(this); 
		$('html, body').stop().animate({ 
			scrollTop: $(anchor.attr('href')).offset().top - $('.navbar').outerHeight()
			}, 1000); 
			e.preventDefault(); 
		}); 
	return false; 
});

Тут все понятно, нажал человек на объект в ссылке которого указан не урл а id-блока и промотало его до блока с соответствующим id за 1000.

А как сделать так что бы при нажатии не сразу шла перемотка, а экран дернулся, так же плавно, на 100 а уже поле этого перемотало в нужный блок. То есть если блок на который ссылается ссылка находится под ней, то при нажатии на ссылку экран сначала поднимаеться на 100 вверх, а потом опускается до нужного блока, и наоборот.

Заранее благодарен

smart-create,
}, 1000, 'easeInElastic'); при наличии jqueryui на странице

рони, сделал вот так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ 
	$('a[href*="#"]').bind("click", function(e){ 
		var anchor = $(this); 
		$('html, body').stop().animate({ 
			scrollTop: $(anchor.attr('href')).offset().top - $('.navbar').outerHeight()
			}, 1000, 'easeInElastic'); 
			e.preventDefault(); 
		}); 
	return false; 
});
</script>

При нажатии на нужную ссылку нечего не происходит визуально, но по факту происходит "dos-атака" клиента)) в консоли с бешеной скоростью появляется одна и та же ошибка:

jquery.min.js:3 Uncaught TypeError: r.easing[this.easing] is not a function
    at init.run (jquery.min.js:3)
    at i (jquery.min.js:3)
    at Function.r.fx.timer (jquery.min.js:3)
    at hb (jquery.min.js:3)
    at HTMLHtmlElement.g (jquery.min.js:3)
    at Function.dequeue (jquery.min.js:3)
    at HTMLHtmlElement.<anonymous> (jquery.min.js:3)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.queue (jquery.min.js:3)

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

Не подскажите в чем дело может быть? Как видите библиотека jq подключена - последняя версия с гугла

строка 2 в начало добавить

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

рони, большое спасибо и приношу извинения за невнимательность