Анимация в IE

@andrey_rtv · Регистрация: 20.07.2012

Студворк — интернет-сервис помощи студентам

Мне надо было написать несложный JS анимацию, вот собственно и она:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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

Очень прошу помочь знающий народ.

Заранее благодарен!!!

@__proto__ · 19.08.2012, 22:36

вот универсальная анимация

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html>
  <head>
   <style> 
    #testBlock {
     
       width:200px;
       height:200px;
       background-color:black;
     
     }
    </style>
  </head>
  <body>
    <div id='testBlock'></div>
    <script>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function animate(opts){
 var start = new Date();
    
    var timer = setInterval(function (){
      
       var progress = (new Date - start)/opts.duration;
       if(progress > 1)progress = 1;    
       
        opts.step(opts.delta(progress));
        
        if(progress == 1){
            clearInterval(timer);
            opts.compleat && opts.compleat(opts.elem); 
            };
         
        },opts.delay || 40);
    
    return timer;
    }
    
    
function Prop(opts){
 
opts.step = function (prog){    
var value;
 
  for(var i = opts.prop.length;i--;){
  
     value = opts.start[i] + ((opts.value[i] - opts.start[i] )*prog);
    opts.elem.style[opts.prop[i]] = value+ opts.units;
    
}; 
 
}
 
opts.delta = function (progress){
 
return progress;
 
}  
 return animate(opts);
}
 
Prop({
  elem:document.getElementById('testBlock'),//элемент на котором происходит анимация 
  start:[0],// начальное значение
  value:[1],// конечное значение
  prop:['opacity'],/* свойство анимации, можно анимировать несколько свойств ['opacity','width']
  тогда start передается так [0,100](100 - начальное значение ширины) , а value так [1,500](500 - конечное значение ширины)
*/duration:2000,// время анимации
  units:''//единицы измерение px || % || ''-без единици измерения
      
      });

HTML5
1
2
3
4
    </script>
 
  </body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .