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, картинка просто меняется. В чем, собственно, может быть причина этого? |
| Часовой пояс GMT +3, время: 21:36. |