Анимация в IE (проблема)

[Deff]

Andrey_rtv,
Распакуйте - установите на страницу - завтра гляну... с обфусцированным возицо не буду

[melky]

setInterval(this.animate, 5000);

а Вы догадались правильно.

в функции, которая исполнится через 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); 
               }
// ....

[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);
		   	   
		   
		  } 
		  
		  
	   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, возможно дело в этом.

[Andrey_rtv]

Я вообще впервые столкнулся с тем, что js в разных браузерах поддерживается по разному ..

Меня это весьма огорчает Ладно разметка, которая вроде в IE 8 - 9 уже начала приобретать нормальный вид, но код .... это соооовсем другое дело. Если так и будет разные методы по-разному работать в разных браузерах, то это очень печально.

Вы часто сталкиваетесь с проблемами при кроссбраузерности js?

[Andrey_rtv]

Попробовал вместо PNG-24 JPG, ничего не вышло: смена картинок есть, анимации нет.

[melky]

Я вообще впервые столкнулся с тем, что js в разных браузерах поддерживается по разному ..

Это jQuery, в ней смена прозрачности (opacity) работает и в IE
... к сожалению, это единственная 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, а проблема была в том, что он забыл класс элементу правильный дать), а мои телепаты с аватарки их прочитать не могут лучший помошник - Вы сам. Удачи!

[Andrey_rtv]

Средство 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 в качестве точки остановки , в крайних случиях консолью.

Спасибо за ответ!

[Deff]

Andrey_rtv,
Запуск будет осуществляцо одновременной и скрытия и раскрытия(если блоки разные) - для иного нужно помещать вторую функцию в callback первой
Тем паче никто не мешает Вам ставить картинки в разные блоки с абсолютным позицией - они будут один под одной

тогда чисто выполняем .fadeToggle(1500); для конкретных блоков(один будет сворачивацо - другой разворачивацо

[melky]

Andrey_rtv,
действительно, анимация не работает в IE.

уберите ошибку скрипта и поставьте HTML5 доктайп.

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" *!*onload="posCounter();"*/!*>

... ибо даже в IE10 анимация тоже не работает.

[Andrey_rtv]

Вы правильно говорите, но на деле получается задержка в setInterval.

Хотя такого быть не должно, и пропускается 1 картинка. Я просто сейчас не очень хочу разбираться в причине ентого.

Оставим тот вариант который есть - он работает везде, кроме IE. В IE нет анимации, как animate, так и fadeToggle, картинка просто меняется.

В чем, собственно, может быть причина этого?