Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.08.2014, 15:37
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Проблема кроссбраузерности 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
Ответить с цитированием
  #2 (permalink)  
Старый 14.08.2014, 20:47
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

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

http://caniuse.com/#search=keyframes
Ответить с цитированием
  #3 (permalink)  
Старый 14.08.2014, 20:48
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

if ( spanTel.hasClass('shake') ){
	spanTel.removeClass('shake');
}
else {
	spanTel.addClass('shake');
}
Это можно заменить на spanTel.toggleClass('shake'), если мне не изменяет память.
Ответить с цитированием
  #4 (permalink)  
Старый 15.08.2014, 09:25
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Сообщение от ixth Посмотреть сообщение
if ( spanTel.hasClass('shake') ){
	spanTel.removeClass('shake');
}
else {
	spanTel.addClass('shake');
}
Это можно заменить на spanTel.toggleClass('shake'), если мне не изменяет память.
И правда http://api.jquery.com/toggleclass/ Вообще мне нужно как-то анимировать телефон, чтобы он дёргался время от времени, подпрыгивал, свистел и пердел. Для этого не очень рационально целую библиотеку css подключать. Есть ли какой-нибудь простой и кроссбраузерный способ добиться такой анимации?
Ответить с цитированием
  #5 (permalink)  
Старый 15.08.2014, 16:14
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

В общем вот такой говнокод накатать пришлось:
<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. Это мой первый код, написанный самостоятельно, спасибо Илье за учебник!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery Ajax проблема отладки скрипта Little_Cat AJAX и COMET 0 22.09.2012 11:37
Проблема с .blur в jQuery Akademik Events/DOM/Window 4 08.07.2012 11:14
Обращение к обектам jQuery - проблема с доступом. Anthony jQuery 1 08.02.2011 11:05
JQUERY fadeIn и fadeOut ПРОБЛЕМА RomanVasin Элементы интерфейса 6 30.05.2010 11:19
Проблема со списком jquery Deexus jQuery 3 09.01.2009 21:33