Скриптовая анимация: прозрачность
javascript, 16.04.2009 Четверг, 00:39
Теги:
Теги:
На пути разработки API для третьей версии своей галереи iLoad, мне пришлось писать несколько функций для анимации веб элементов. Одна из этих функций - функция программной анимации изменения прозрачности. В jQuery её существует аналог - группа функций fadein, fadeout.
Итак, поподробнее: функция полностью кроссбраузерная и проверена в во всех основных браузерах
. Я не стал мудрить с названиями и тоже назвал функция Fade.
Возможности функции: изменение прозрачности с заданной в миллисекундах скоростью, выполнение заданного кода по прошествии анимации. Инициализация функции происходит так: Вот полный код функции: А вот пример действия функции и всех её возможностей (пример находится в фрейме, адрес страницы фрейма Opacity.html): В примере вы можете видеть работу функции по моментальному изменению прозрачности, по изменению прозрачности с периодом выполнения - 300мс и работу параметра callback. Жду комментариев.
Итак, поподробнее: функция полностью кроссбраузерная и проверена в во всех основных браузерах
. Я не стал мудрить с названиями и тоже назвал функция Fade. Возможности функции: изменение прозрачности с заданной в миллисекундах скоростью, выполнение заданного кода по прошествии анимации. Инициализация функции происходит так:
Code
<script>
fade(object,value,time,callback);
// Где object - анимируемый объект
// value - значение прозрачности от 0 до 100
// time - время выполнения в миллисекундах
// callback - код, выполняющийся после анимации
// Пример правильной инициализации:
fade(myDiv,50,300,function(){alert('Готово!');});
</script>
fade(object,value,time,callback);
// Где object - анимируемый объект
// value - значение прозрачности от 0 до 100
// time - время выполнения в миллисекундах
// callback - код, выполняющийся после анимации
// Пример правильной инициализации:
fade(myDiv,50,300,function(){alert('Готово!');});
</script>
Code
<script>
fade = function(obj,to,time,callback){
var IE=/*@cc_on!@*/false;
if(IE){
from = obj.style.filter.replace(/.*opacity=([0-9]*).*/,'$1');
if(!from){from=100;}
from=parseFloat(from);
}
else{
var from=obj.style.opacity;
if(from==''){from=1;}
from=parseFloat(from);
to=to/100;
}
var start = new Date().getTime();
setTimeout(function(){
var now=(new Date().getTime())-start;
var progress=now/time;
var result=(to-from)*progress+from;
if(IE){obj.style.filter="alpha(opacity="+result+")";}
else{obj.style.opacity=result;}
if(progress<1){setTimeout(arguments.callee,10);}
else{
if(IE){obj.style.filter="alpha(opacity="+to+")";}
else{obj.style.opacity=to;}
if(callback){setTimeout(callback,0);}
}},10);
};
</script>
fade = function(obj,to,time,callback){
var IE=/*@cc_on!@*/false;
if(IE){
from = obj.style.filter.replace(/.*opacity=([0-9]*).*/,'$1');
if(!from){from=100;}
from=parseFloat(from);
}
else{
var from=obj.style.opacity;
if(from==''){from=1;}
from=parseFloat(from);
to=to/100;
}
var start = new Date().getTime();
setTimeout(function(){
var now=(new Date().getTime())-start;
var progress=now/time;
var result=(to-from)*progress+from;
if(IE){obj.style.filter="alpha(opacity="+result+")";}
else{obj.style.opacity=result;}
if(progress<1){setTimeout(arguments.callee,10);}
else{
if(IE){obj.style.filter="alpha(opacity="+to+")";}
else{obj.style.opacity=to;}
if(callback){setTimeout(callback,0);}
}},10);
};
</script>
просто сам искал этот скрипт и хочу поставить правда в укозе норм шарю но че то не догоняю куда