Niedziałający Hover/mousemove itp [JS/ JQuery]

Question

Witam, mam problem z hoverem i jego pochodnymi w JQuery i JS. 
Potrzebuję zrobić ukryty div o ID 'Pole' (przezroczysty): po najechaniu na który zostaje dodana klasa do innych dwóch divów o ID 'EyesID'.
Zejście kursorem z 'Pole' usuwa klasę. Klasa ta zawiera zdefiniowaną animację (BlinkingEyesAnimationCSS).
Gdzie występują błędy w poniższej metodzie? Czy byłby w stanie ktoś mi przedstawić inne rozwiązanie działające?
 

<div class='eye' id="EyesID"></div>
<div class='eye' id="EyesID"></div>
<div class="InvisibilityDivToBlinkEyesOfTheSun" id="Pole"></div>

$('#Pole').hover(
       function(){ $('#EyesID').addClass('BlinkingEyesAnimationCSS') },
       function(){ $('#EyesID').removeClass('BlinkingEyesAnimationCSS') }
);

.BlinkingEyesAnimationCSS
{
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: example;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    /* Standard syntax */
    animation-name: example;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Gdzie popełniłem błąd? :) Z góry dziękuję

Answer 1

Nie wiem, czy o to chodzi, ale masz dwa elementy o takim samym ID więc nie będzie to ci działało poprawnie. ID musi być unikalne  w skali danego pliku HTML. Jak chcesz odwoływać się do dwóch elementów to wykorzystujesz atrybut class

Comments

Niestety to nie pomaga dalej w rozwiązaniu problemu, ale dziękuję, bo słuszna uwaga. :)

Answer 2

Gdzie ta animacja (@keyframes example)?

Comments

@-webkit-keyframes example {
    75% {
		width: 40%;
		
	}
    100% {
		width: 5%;
		}
}
@keyframes example {
    75% {
		width: 40%;
		}
    100% {
		width: 5%;
		}
}

Wybacz, nie zauważyłem, że nie podałem :)

Answer 3

Wrzuć cały kod, to postaram się bardziej pomóc. Ale z tego co widzę zamiast :
$('#Pole').hover(
 function(){ $('#EyesID').addClass('BlinkingEyesAnimationCSS') },
 function(){ $('#EyesID').removeClass('BlinkingEyesAnimationCSS')
});
Powinieneś zrobić:
$('#Pole').mouseenter(function(){
$('#EyesID').addClass('BlinkingEyesAnimationCSS');
});
$('#Pole').mouseleave(function(){
$('#EyesID').removeClass('BlinkingEyesAnimationCSS');
});

Nie dawaj dwóm obiektom tego samego ID, od tego są klasy :^)

Pokaż też tę animację na @keyframe

Wydaje mi się, że powinno być ok, ale wrzuć caly kod, chętnie zobaczę efekt końcowy :D Powodzenia!

Comments

	$('#Pole').mouseenter(function(){
			$('#EyesID1').addClass('BlinkingEyesAnimationCSS')
			$('#EyesID2').addClass('BlinkingEyesAnimationCSS')
	});
	$('#Pole').mouseleave(function(){
			$('#EyesID1').removeClass('BlinkingEyesAnimationCSS')
			$('#EyesID2').removeClass('BlinkingEyesAnimationCSS')
	});

Niestety też nie pomogło :(

animacja w sobie sama działa bez zarzutów (wrzuciłem komentarz wyżej).

---

Zgubiłeś po drodze średniki po każdej linijce w środku funkcji :^)

Jak napisałem wcześniej, wrzuć caly kod w jednym kawałku (np link do pastebina) to zobaczę o co chodzi :>

---

Powiedz czy o to Ci chodziło:
https://pastebin.com/M8EawAd1

---

Dokładnie tak miało działać, ale właśnie zauważyłem, że ja potrzebuję dać class nie .eye, lecz .eye:after
Z racji tego, że łączę kilka rzeczy w jedną, możliwe, że stąd wynikają moje problemy.
Co ciekawe nawet, gdy poprawiłem jquery, dalej nie włączało animacji na mojej stronie (nawet na nie tym co trzeba divie) - na tym co mi wysłałeś działa.
Podrzucam link do tego jak to u mnie wygląda:
https://pastebin.com/teStrynp

Z prawej strony są oczy podążające za kursorem, a na środku szary div. To właśnie na nim chciałbym uruchamiać animację mrugania.