Вот написал решение под многие браузеры, на сколько знаю:
| Код | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Переливы прозрачности. Плавные изменения свойств.</title>
<style type="text/css">
#test {
background-color: red;
float:left;
border: 1px solid navy;
padding: 10px;
_filter: alpha(opacity=10); /* IE */
-moz-opacity: 0.1; /* mozilla */
-khtml-opacity: 0.1; /* KHTML Engine(Konquerror) */
opacity: 0.1; /* За*бали различия браузров? Используй CSS3! */
}
</style>
<script type="text/javascript">
<!--
function showElement(show, obj, time, resolution) {
resolution=(resolution>0? resolution: 50); //пауза между фреймами, не ставь мало, у тебя не такая крутая машина ;-)
var step=(show? 1: -1)*(1/(time>0? time: 1000))*resolution; //шаг в процентах от заданного времени
var opacity=(typeof(obj.style.KhtmlOpacity)!="undefined")? parseFloat(obj.style.KhtmlOpacity): //konquerror и его семейство
(typeof(obj.style.MozOpacity)!="undefined")? parseFloat(obj.style.MozOpacity): //мозилла и прочие Gecko. кстати, долбанная мозилла не покажет какое сейчас значение, если его не меняли...
(typeof(obj.filters)!="undefined")? obj.filters.Alpha.opacity/100: //ИЕ вариант
(typeof(obj.style.opacity)!="undefined")? parseFloat(obj.style.opacity): //не стоит доверять, может не undefined для понту, а всё равно не поддерживаеться CSS3
null; //нет прозрачности как таковой
if(opacity==null) return;
opacity=isNaN(opacity)? (show? 0: 1) : opacity; //тест на вшивость
//и так здесь мозилла(возможно konquerror) обложалась, мы не можем узнать значение opacity если оно не менялось
//потому в первый раз возьмём как будто мы находимся на границе, либо 0, либо 1
var timer=window.setInterval(function() {
if((opacity+=step)>=1||opacity<=0) window.clearInterval(timer);
if(obj.filters) obj.filters.Alpha.opacity=Math.round(opacity*100);
obj.style.KhtmlOpacity=obj.style.MozOpacity=obj.style.opacity=opacity;
}, resolution);
}
//-->
</script>
</head>
<body>
<div id="test" onclick="showElement(true, this)">Click to show!</div>
<button onclick="showElement(false, document.getElementById('test'));">Hidde</button>
</body>
</html> |
|
