Проблема кроссбраузерности animated.css + jquery
 

Здавствуйте. Хотел сделать анимацию телефона на сайте. В Хроме и Мозилле всё нормально, а Опера и ИЕ заартачились. Не подскажете, в чём проблема? Код:

/* Animated telephone */

$(document).ready(function() {
	var spanTel = $('#telephone');
	setInterval(function(){
		if ( spanTel.hasClass('shake') ){
			spanTel.removeClass('shake');
		}
		else {
			spanTel.addClass('shake');
		}
	},3000);
});

<span id="telephone" class="animated">8(831) бла-бла</span>

Библиотека css здесь https://github.com/daneden/animate.c...er/animate.css

Опера умеет keyframes без префикса в 12.1, но не умеет в 12. IE не умеет вплоть до 10 версии.

http://caniuse.com/#search=keyframes

if ( spanTel.hasClass('shake') ){
	spanTel.removeClass('shake');
}
else {
	spanTel.addClass('shake');
}

Это можно заменить на spanTel.toggleClass('shake'), если мне не изменяет память.

И правда http://api.jquery.com/toggleclass/ Вообще мне нужно как-то анимировать телефон, чтобы он дёргался время от времени, подпрыгивал, свистел и пердел. Для этого не очень рационально целую библиотеку css подключать. Есть ли какой-нибудь простой и кроссбраузерный способ добиться такой анимации?

В общем вот такой говнокод накатать пришлось:

<script>
(function(){
	var spanTel = document.getElementById('telephone');
	var i = 0;
	setInterval(function(){
		var inter = setInterval( function(){
			if ( i < 10 ){
				spanTel.style.padding = '0 10px';
				setTimeout(function(){
					spanTel.style.padding = '0 30px';
				},100);
				i++;
			}
			else {
				spanTel.style.padding = '0 20px';
				clearInterval(inter);
				i = 0;
			}
		} ,200);
	},5000);
})();
</script>

Зато работает аж в IE 5.5! Проверял в ieTester. Это мой первый код, написанный самостоятельно, спасибо Илье за учебник!