Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Глюк с прозрачностью в Firefox'e


Автор: Roy 10.7.2007, 18:38
Есть два слоя

Код

<div id="a1" style=\'position: absolute; top: 310px; left: 100px\'>
    <img name="mainpic1" src="img/collections/'.$gallery_pic.'">
</div>
<div id="a2" style=\'position: absolute; top: 310px; left: 100px; filter: alpha(opacity=0); opacity:0;MozOpacity:0;\'>
    <img name="mainpic2" src="img/collections/'.$gallery_pic.'">
</div>


и ссылка

Код

<a id="btn" href="javascript:doPic(\''.'img/collections/'.$tmp.'\');"><img id="newpic" src="'.'img/collections/'.$tmp.'" height="65" width="75"></a>


которая подставляет в один из слоев новую картинку и запускает скрипт плавного перехода от одно картинки к другой. Красотухис в том, что у слоя со старой картинкой прозрачность переходит от 100 к 0 % а слоя с новой наоборот: от 0 к 100%. В Oper'r, IE6, IE7 все работает - а в Firefox'e сначала мигает новая картинка (перекрывая старую) - а потом все как-то нормализуется. Но резкое появление картинки, у которой прозрачность должна быть нулевая портит весь красотухис :(

Коды скриптов:
Код

function setOpacity(obj, opacity) {
//    opacity = (opacity == 100)?99.999:opacity;
    
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;

    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;

    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}

var m = new Array(0,100);
var t = new Array();
function next() {
m[2]+=4;
m[1]-=4;
setOpacity(document.getElementById("a2"), m[2]);
setOpacity(document.getElementById("a1"), m[1]);
t[0] = setTimeout("next()",1);
if (m[2]>99) clearTimeout(t[0]);
}

function doPic(imgName) {
setOpacity(document.getElementById("a2"), 0);
setOpacity(document.getElementById("a1"), 100);
document.mainpic1.src = document.mainpic2.src;
    m[2]=0;
    m[1]=100;
imgOn = ("" + imgName);
document.mainpic2.src = imgOn;
next();
}


Уже долгое время пытаюсь разобраться, почему с Firefox'ом ткие проблемы...
Если кто подскажет путь решения проблемы, буду очень прищнателен  smile 

Автор: SelenIT 11.7.2007, 01:08
Roy, зачем вторую строчку в скрипте закомментарили? Если я ничего не путаю, она для борьбы как раз с этим багом и нужна была...

Автор: Roy 11.7.2007, 11:29
Код

//    opacity = (opacity == 100)?99.999:opacity;


строка закомментирована, поскольку результата не дает никакого. Если ее раскомментировать - баг все так же проявляется.

Автор: smartov 11.7.2007, 13:59
Roy, думаю проблема в том, что ты неверно прописал opacity для мозиллы в изначальный настройках слоя.

Вот код, работает во всех современных браузерах (современных == версии не ниже этого года).
Дальше думай сам, ищи ошибку у себя.

Код

<html>
<body>

<style>
#div1 {
    position: absolute;
    top: 0; left : 0;
    width:200px;
    height:200px;
    background: red;
}
#div2 {
    position: absolute;
    top: 0; left : 0;
    width:200px;
    height:200px;
    background: lime;
    opacity: 0;
    filter: alpha(opacity:0);
}
</style>

<div id="div1">Hello1</div>
<div id="div2">Hello2</div>


<script type="text/javascript">

var fromOpacity = 100;
var toOpacity = 0;
var $interval;

function next(from, to) {
    setOpacity(from, fromOpacity);
    setOpacity(to, toOpacity);
    fromOpacity -= 4;
    toOpacity += 4;
    fromOpacity = (fromOpacity < 0 ? 0 : fromOpacity);
    toOpacity = (toOpacity > 100 ? 100 : toOpacity);
}

function setOpacity(obj, opacity) {
    
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}

window.onload = function() {
    $interval = setInterval(function() {
        if (fromOpacity == 0) {
        clearInterval($interval);
        return;
    }
    next(document.getElementById('div1'), document.getElementById('div2'));
    }, 100)
}

</script>

</body>
</html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)