Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

[JS] filter opacity in IE niet terug naar 100

Pagina: 1
Acties:

Verwijderd

Topicstarter
Hoi,

Ik heb een probleem met de fade-in van een div met tekst.
In firefox komt de div geleidelijk weer terug tot de volle opacity=1
In ie komt de div ook weer geleidelijk in beeld, maar eindigt vager dan dat hij startte. Als ik op vernieuwen druk wordt de div wel weer normaal weer gegeven.
Ik heb het ook geprobeert zonder de hele fade-in code, maar ook met alleen de regel opacity = 100 komt de div niet helemaal terug naar normaal.
Kan iemand mij vertellen waar dit aan ligt?

code:
1
2
3
4
5
6
7
8
9
10
11
function change2(){
    var thisDiv = document.getElementById("inhoudDiv").style;
    thisDiv.filter = 'alpha(opacity=' + fade + ')'; thisDiv.opacity = (fade/100);
    fade=fade+10;
    if(fade<100){i=setTimeout('change2()',100);}
    if(fade>=100){
        clearTimeout(i);
        fade=100;
        thisDiv.filter='alpha(opacity=' + fade + ')'; thisDiv.opacity = 1;
    }
}

  • gvanh
  • Registratie: April 2003
  • Laatst online: 02-12-2023

gvanh

Webdeveloper

In een JavaScript object dat ik geschreven heb voor een fade-out/fade-in gebruik ik voor het zetten van de opacity een aparte functie. Dat heeft als voordeel dat je a) de functie makkelijker kan debuggen en b) de functie kan hergebruiken. De functie die ik gebruik en - voor mij - in alle moderne browsers werkt:

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
    /**
     * Set opacity of given object to given value, respecting browsers.
     *
     * @author R.J.T. de Vries <rdevries@thirdwave.nl>
     * @param   object       obj
     * @param    integer        opacity
     * @return  mixed         true if opacity was set successfully, 0 on failure.
     */
    function _setOpacity(obj, opacity) {
        switch ( true ) {
            case is_object(obj.style.opacity):
                obj.style.opacity = opacity / 100;
                break;
            case is_object(obj.style.MozOpacity):
                obj.style.MozOpacity = opacity / 100;
                break;
            case is_object(obj.parentNode) && is_object(obj.filters) && is_object(obj.filters.alpha):
                obj.filters.alpha.opacity = opacity;
                break;
            default:
                return 0;
        }
        return true;
    } // _setOpacity()


Misschien heb je daar wat aan.
De eerste twee 'cases' zijn voor alle 'echte' browsers, de derde en laatste case is voor Internet Explorer.

Ik zie dat ik dan ook de 'is_object' functie moet toevoegen:

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
 
    /**
     * A PHP-style method to see if given object is actually an object, and not
     * an undefined variable.
     * 
     * @author R.J.T. de Vries <rdevries@thirdwave.nl>
     * @param   mixed       o    potential object to check
     * @return  boolean         true if object, false if not
     */
    function is_object(o) {
        if ( typeof(o) != 'undefined' && o !== 'null' && o !== null ) return true;
        return false;
    } // is_object()


Zoals al blijkt uit de commentaren heb ik die functie ooit gemaakt om een functie te hebben die vergelijkbaar is met PHP's "is_object()" functie. Hij is overigens niet heel nuttig, die functie, want makkelijk op een andere manier op te lossen. Maar het gaf mij de mogelijkheid om zonder JavaScript foutmeldingen te controleren of een variabele een geldig JavaScript object is.

[ Voor 34% gewijzigd door gvanh op 16-10-2007 10:37 ]