У меня есть набор кругов (.dot), и когда мы щелкаем по одному из них, он анимирует другой элемент.
Я пытаюсь настроить его так, чтобы при щелчке по одному из этих кругов функции наведения, наведения мыши и щелчка мышью были бы неактивны для этого одного элемента.
Мне нужно использовать addEventListener, а затем удалитьEventListener или что-то подобное, но у меня возникают проблемы с реализацией, где это должно быть установлено в коде.
Этот код показывает, что я имею в виду: https://codepen.io/celli/pen/MMwpjx
В этом примере я удалил свой addEventListner для функции щелчка, так как он не работал для меня, и я неправильно его реализую.
// mouseover and mouseout functions
$('.dotWrapper').mouseover(function(event) {
TweenMax.to($(this).children('.dot'), .25,{scale:3, ease: Circ.easeOut,
transformOrigin:"50% 50%"});
});
$('.dotWrapper').mouseout(function(event) {
TweenMax.to($(this).children('.dot'), .75,{scale:1, ease: Circ.easeOut});
});
// click function animates
$('.dotWrapper').click(function() {
TweenMax.to($(this).children('.dot'), .25,{scale:2, ease: Circ.easeOut});
$('.dot').removeClass('selected');
$(this).children('.dot').addClass('selected');
// clear existing lines and dates
TweenMax.to('.vertLine', .5, {alpha: 0, scaleY:1, ease:Expo.easeOut});
TweenMax.to('.timelineDate', .5, {alpha: 0, y:-20, ease:Expo.easeOut});
// animate the date and line
var dateLine = new TimelineMax({ });
dateLine.to($(this).children('.vertLine'), 1.2, {scaleY:.50,autoAlpha: 1,ease:Expo.easeOut})
.to($(this).children('.timelineDate'), 1, {autoAlpha: 1,y:20,ease:Expo.easeOut}, '-=1');
});