Анимация в IE (проблема)
Мне надо было написать несложный JS анимацию, вот собственно и она:
function Start_animation() {
var change = false;
var index_img = 0;
var class_this = this;
this.images = function() { return new Array ('header', 'header_2', 'header_3'); }
this.animate = function() {
change = (change) ? (false) : (true);
$('#header .header_img img').each(function (index, el) {
if ($(el).closest('.header_img').css('opacity') == 0) $(el).attr('src', '/skin/img/BG/' + get_next() + '.png');
});
$('#header #first_h').animate({opacity: (change) ? (0) : (1)}, 1500);
$('#header #second_h').animate({opacity: (change) ? (1) : (0)}, 1500);
setInterval(this.animate, 5000);
}
var get_next = function() {
index_img++;
index_img = ((index_img + 1) <= class_this.images().length) ? (index_img) : (0);
return class_this.images()[index_img];
}
}
var Top_animation = new Start_animation();
Top_animation.animate();
*** В массиве хранятся названия картинок, чтоб время на понимание сией ерунды не тратили. Все отлично и прекрасно, но он не работает в IE. Дебажил - все норм src картинок меняется (правда скрипт вроде как иногда в IE останавливается ..), но animate не работает вообще. Картинки в PNG-24, возможно связано с этим. И дебагер IE ругался на: setInterval(this.animate, 5000); , вроде как невалидный аргумент .. Переправлял на setInterval(function() { class_this.animate() }, 5000);, везде все работает, конечно же кроме IE :) Очень прошу помочь знающий народ. Заранее благодарен!!! |
Andrey_rtv,
Деио сайт есть ? И юзайте правильную запись в топике - так - это не читабельно http://javascript.ru/formatting |
Спасибо, ваш ответ многое прояснил ...
Насчет форматирования, код настолько просто, что необходимости в форматировании не видел, но вы, вообщем, правы, исправлюсь. Домен сайта на разработку: http://abisoft.oliwa-pro.ru . Можете потестить. |
Andrey_rtv,
Цитата:
function Start_animation() {
var change = false;
var index_img = 0;
var class_this = this;
this.images = function() { return new Array ('header', 'header_2', 'header_3'); }
this.animate = function() {
change = (change) ? (false) : (true);
$('#header .header_img img').each(function (index, el) {
if ($(el).closest('.header_img').css('opacity') == 0) {
$(el).attr('src', '/skin/img/BG/' + get_next() + '.png');
}
});
$('#header #first_h').animate({opacity: (change) ? (0) : (1)}, 1500);
$('#header #second_h').animate({opacity: (change) ? (1) : (0)}, 1500);
setInterval(this.animate, 5000);
}
var get_next = function() {
index_img++;
index_img = ((index_img + 1) <= class_this.images().length) ? (index_img) : (0);
return class_this.images()[index_img];
}
}
var Top_animation = new Start_animation();
Top_animation.animate();
Так - Симпатичнее ? Чичас гляну на сайт - правдо сплю уже |
Andrey_rtv,
У Вас там две библиотеки jQuery Переставьте Наверх с заменой или уберите 2 версию <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
|
Спасибо, что глянули. Попробую.
P.S. Насчет кнопочки вы правы |
Я убрал 1 библиотеку.
Очевидно, что ничего не заработало, т.к. при 2х библиотеках работали остальные элементы jQuery и в IE в том числе. И вообще не очень понятно как они должны друг другу мешать .. пространство имен перезаписывают. Но все равно спасибо за совет! |
следите за this в Top_animation.animate.
подсказка - console.log |
Цитата:
|
melky - это напоминает код да винчи, осталось навести меня на путь тайной секты, владеющей сокральным знанием.
Если вас не затруднит - напишите четко, что вы хотели сказать. В чем конкретно проблема? class_this - this объекта Start_animation, ничего плохого пока не вижу. Если в рекурсию поставить alert, то будет выводится сообщение. Проблема скорее всего в opacity и IE и PNG-24, хотя, возможно, я неправ. Консоль IE ругался на неправильный аргумент setInterval(this.animate, 5000); , хотя после подстановки setInterval(function() {class_this .animate()}, 5000)
- ошибка пропадает, но анимация не появляется. |
Andrey_rtv,
Распакуйте - установите на страницу - завтра гляну... с обфусцированным возицо не буду |
Цитата:
в функции, которая исполнится через 5 сек, this будет равен window, а this.animate вернёт undefined, и это вызовет ошибку. тем более, зачем нужен интервал в таком виде, как он есть? функция будет исполняться каждые 5 сек бесконечное число раз. ... анимация не появляется? может, 5 сек слишком много? попробуйте так function Start_animation() {
var change = false;
var index_img = 0;
var class_this = this;
var interval_id; //<-----
this.animate = function() {
// .....
if (!interval_id) {
interval_id = setInterval(function () {
class_this.animate();
}, 16);
}
// ....
|
Действительно с интервалом вышла заминка, т.к. интервал в том виде, в котором он есть, будет рекурсивно создавать объект интервала и тем самым будет много объектов интервала, что, вообщем, весьма неправильно.
Переписал: function Start_animation() {
var change = false;
var index_img = 0;
var class_this = this;
this.images = function() { return new Array ('header', 'header_2', 'header_3'); }
this.animate = function() {
change = (change) ? (false) : (true);
$('#header .header_img img').each(function (index, el) {
if ($(el).closest('.header_img').css('opacity') == 0) $(el).attr('src', '/skin/img/BG/' + get_next() + '.png');
});
$('#header #first_h').animate({opacity: (change) ? (0) : (1)}, 1500);
$('#header #second_h').animate({opacity: (change) ? (1) : (0)}, 1500);
}
var get_next = function() {
index_img++;
index_img = ((index_img + 1) <= class_this.images().length) ? (index_img) : (0);
return class_this.images()[index_img];
}
}
var Top_animation = new Start_animation();
setInterval(Top_animation.animate, 5000);
Везде все норм. IE каждые 5 сек (+ видимо задержка 1.5 сек на анимацию) меняет картинку (src), но анимации замены (animate opacity) не происходит. Попробую перевести картинки из png в jpg, возможно дело в этом. |
Я вообще впервые столкнулся с тем, что js в разных браузерах поддерживается по разному ..
Меня это весьма огорчает :) Ладно разметка, которая вроде в IE 8 - 9 уже начала приобретать нормальный вид, но код .... это соооовсем другое дело. Если так и будет разные методы по-разному работать в разных браузерах, то это очень печально. Вы часто сталкиваетесь с проблемами при кроссбраузерности js? |
Попробовал вместо PNG-24 JPG, ничего не вышло: смена картинок есть, анимации нет.
|
Цитата:
... к сожалению, это единственная CSS3 фича, которая встроенно поддерживается в jQuery для IE. хотя их легко реализовать почти все. Я бы рекомендовал Вам убрать говнокод, и воспользоватсья средствами, которые люьезно предоставляет jQuery : вот это вот this.animate = function() {
change = (change) ? (false) : (true);
// ... (кусок, который тут находится, помечен так)
$('#header #first_h').animate({opacity: (change) ? (0) : (1)}, 1500);
$('#header #second_h').animate({opacity: (change) ? (1) : (0)}, 1500);
}
легко заменяется на встроенный метод fadeToggle (не уверенна все 100%, что он подходит Вам, но вроде бы да :) ) : this.animate = function () {
// .... (тут кусок, которого нет в коде сверху)
$('#header #first_h, #header #second_h').fadeToggle(1500);
};
а кусок кода, который я убрал, тоже немного плох.я так понял, он меняет адрес картинки. $('#header .header_img img').each(function (index, el) {
if ($(el).closest('.header_img').css('opacity') == 0) $(el).attr('src', '/skin/img/BG/' + get_next() + '.png');
});
он вообще отрабатывает? адрес картинки меняется? вообще проверку на "скрытость" лучше делать через псевдоселектор hidden: $('#header .header_img img').each(function (index, el) {
el = $(el);
if (el.closest('.header_img').is(":hidden")) {
el.attr('src', '/skin/img/BG/' + get_next() + '.png');
}
});
вообще, было бы неплохо открыть консоль, и расставить брейкпоинты (точки останова) - полезная штука при отладке. ... а то могут быть даже с именами классов проблемы (тут и такое было. человек задает вопрос по JS, а проблема была в том, что он забыл класс элементу правильный дать), а мои телепаты с аватарки их прочитать не могут :) лучший помошник - Вы сам. Удачи! |
Средство animate любезно предоставляет именно JQuery.
this.animate = function () {
// .... (тут кусок, которого нет в коде сверху)
$('#header #first_h, #header #second_h').fadeToggle(1500);
};
Работать не будет, т.к. даже говнокодерам видно конструкцию () ? () : () . Я имею ввиду слой будет скрываться и через 5 сек показываться, а не одновременно скрываться и показываться. fadeToggle - метод, наследуемый объектом animate, его замена НИЧЕГО не даст, т.к. по сути является ссылкой на animate. (Что было мной проверено эксперементально 10 мин назад), в IE не работает анимация. Вот сайт: http://abisoft.oliwa-pro.ru - можете сами убедиться (шапка страницы). На счет opacity, поддерживаемый IE я знаю, но видимо что-то пошло не так .. is(":hidden") - действительно проверяет, но мне нужны была проверка именно свойства opacity css, чтобы убедится в его работоспособности. И так как я изменяю именно opacity, лучше проверять напрямую. Кстати, подстановка is(":hidden"), пропускает 1 картинку, т.к. не видет opacity == 0, вот так вот ... Кусок: $('#header .header_img img').each(function (index, el) {
if ($(el).closest('.header_img').css('opacity') == 0) $(el).attr('src', '/skin/img/BG/' + get_next() + '.png');
});
отрабатывает прекрасно, о чем было написано выше. Я пользуюсь alert в качестве точки остановки :), в крайних случиях консолью. Спасибо за ответ! |
Andrey_rtv,
Запуск будет осуществляцо одновременной и скрытия и раскрытия(если блоки разные) - для иного нужно помещать вторую функцию в callback первой Тем паче никто не мешает Вам ставить картинки в разные блоки с абсолютным позицией - они будут один под одной тогда чисто выполняем .fadeToggle(1500); для конкретных блоков(один будет сворачивацо - другой разворачивацо |
Andrey_rtv,
действительно, анимация не работает в IE. уберите ошибку скрипта и поставьте HTML5 доктайп. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" *!*onload="posCounter();"*/!*> ... ибо даже в IE10 анимация тоже не работает. |
Вы правильно говорите, но на деле получается задержка в setInterval.
Хотя такого быть не должно, и пропускается 1 картинка. Я просто сейчас не очень хочу разбираться в причине ентого. Оставим тот вариант который есть - он работает везде, кроме IE. В IE нет анимации, как animate, так и fadeToggle, картинка просто меняется. В чем, собственно, может быть причина этого? |
Сек, щас попробую. onload="posCounter();" уже убирал, эффекта 0. А доктайп можно попробовать.
melky, кстати, извиняюсь. Вы были абсолютно правы: this.animate = function () {
// .... (тут кусок, которого нет в коде сверху)
$('#header #first_h, #header #second_h').fadeToggle(1500);
};
работать должно, но там появляется задержка 5 сек, как будто он анимирует 1 из #header #first_h, #header #second_h. |
Ошибку убрал, доктайп поменял. В IE анимация продолжает отсутствовать.
У вас вообще часто бывает, что JS по-разному ведет себя в разных браузерах? |
Цитата:
(хреновы вендорные префиксы... кучу хреновых танцев с бубном. крик души.) такс. ну, я разобрался :) и это хорошо анимировать стоит не элементы-div'ы, а картинки в них : $("#first_h, #second_h").find("img").fadeToggle(1500);
и при загрузке страницы нужно нижнюю скрывать. $("#second_h").find("img").css("opacity", "0");
после этого можно использовать fadeToggle. |
Спасибо, щас попробую.
|
Все действительно зарабоало!
ОГРОМНОЕ вам спасибо!!!!!!! Я, кстати, пробовал анимировать img, у меня не работало, наверное, доктайп сказался .. Как fadeToggle, так и animate работает. Конечно это очень печально, что скрипты браузеры отображают по разному. Я перешел на web-программирование с JAVA/C++, и этот факт для меня просто ужасен :) Как отлаживать скрипты то, когда интерпретаторы ведут себя как хотят .. не понятно. Я так понял для вас это бычное дело? Еще раз огромное спасибо! |
| Часовой пояс GMT +3, время: 14:03. |