[js] transparant via for-lus - Softwareontwikkeling

dinsdag 24 juli 2007 22:19

Acties:

Topicstarter

Ik ben voor mijzelf een beetje bezig met javascript, het hoe- en wat.
Als frontpage voor mijn website wil ik een enkele afbeelding gebruiken en waarna je er op klinkt, deze verdonkerd (achtergrond kleur is zelf al zwart) en je doorgelinkt word naar de site.

Zeer basic gebruik ik nu de volgende code.

code:

<html>

<head>
    <style>
        body         {  background:#000000;     }
        .image      {   margin-top:25%;     }
    </style>
</head>

<body>
    <img src="test.gif" class="image">
</body>

</html>

Het is de bedoeling dat de afbeelding steeds transparanter word. Ik denk zelf dat dit het makkelijkst te berijken is door middel van javascript, een for-lus. Met mijn (misschien ietswat te)logische denkwijze, kom ik tot het volgende.

De javascript moet eerst aangeroepen worden.

code:

1	<img src="test.gif" id="test" class="image" onclick="transparant()">

en dan, mijn bedachte stukje script.

code:

<script type="text/javascript">
    var i=0;

    function transparant()
    {
        for (i=0;i<=100;i++)
        {
            setTimeout(document.getElementById("test").style.opacity=i,1);
        }
    }
</script>

Ik gebruik de setTimeout om een kleine vertraging tussen elke verandering te krijgen. Ik ben anders bang dat er geen 'vloeiend' effect in zit, maar dat de transparantie in een keer naar 100% springt.

De opacity geef ik de waarde van de loop, waardoor hij steeds op- of afloopt.

Bovenstaande werkt helaas niet. Ik heb van alles gebrobeert, ook zonder de setTimeout.
De informatie ik via google vind, gaat alleen over het aanroepen van 'normale' elementen, het element 'opacity' word nooit gebruikt. Voorbeeld:

code:

1	document.getElementById("box1").style.backgroundColor = "#000000";

Hoe krijg ik deze werkende met 'opacity'?

de wel werkende css (dus gewoon in de stylesheet) van opacity is:
opacity:.50; (voor FF)
filter: alpha(opacity=50); (voor IE)

Mijn eerste topicstart hier op GoT, ik hoop dat het aan de eisen voeldoet. Zo niet, hoor ik het graag.

specs - home

dinsdag 24 juli 2007 22:21

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Hint: Je zet nu in 1 klap 100 time-outs die allemaal 'tegelijk' afgevuurd worden

De executie 'paused' niet bij de setTimeout maar gaat gewoon verder.

Pasgeleden nog eenzelfde topic gehad: [JS] setTimeout spoor compleet bijster

Ik zou eerder zoiets doen:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        var tp = 100;
        
        function doSomething() {
            tp--;
            document.getElementById('foo').innerHTML = tp;
            if (tp>0) window.setTimeout('doSomething()',10);
        }
    </script>
</head>

<body>
    <input type="button" onclick="doSomething();" value="Go!">
    <div id="foo">-</div>
</body>
</html>

[ Voor 101% gewijzigd door RobIII op 24-07-2007 23:07 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 24 juli 2007 23:07

Acties:

Verwijderd

Dit zou al moeten helpen:

JavaScript:

function transparant() {
    for (var i = 0 ; i <= 100 ; i++) {
        setTimeout( 
            ('document.getElementById("test").style.opacity=' + ( i / 100)), 
            i * 10
        );
    }
}

Opmerkingen:
- opacity is een getal tussen 0 en 1
- de timeout wordt nu tussen 0 en 1000 ms
- de 1e parameter van setTimeout is of een function, of een string die geevalueerd kan worden.

dinsdag 24 juli 2007 23:08

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verwijderd schreef op dinsdag 24 juli 2007 @ 23:07:
Dit zou al moeten helpen:
JavaScript:
1
2
3
4
5
6
7
8
function transparant() {
    for (var i = 0 ; i <= 100 ; i++) {
        setTimeout( 
            ('document.getElementById("test").style.opacity=' + ( i / 100)), 
            i * 10
        );
    }
}
Opmerkingen:
- opacity is een getal tussen 0 en 1
- de timeout wordt nu tussen 0 en 1000 ms
- de 1e parameter van setTimeout is of een function, of een string die geevalueerd kan worden.

Nu schedule je in 1 keer meteen 100 timeout's. Waarom zou je dat doen?
Je kunt naast setTimeout ook nog setInterval gebruiken overigens:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        var tp = 100;
        
        function doSomething() {
            if (tp>0) {
                tp--;
                document.getElementById('foo').innerHTML = tp;
            }
        }
    </script>
</head>

<body>
    <input type="button" onclick="window.setInterval('doSomething()',10);" value="Go!">
    <div id="foo">-</div>
</body>
</html>

En met een clearInterval kun je zelfs de setInterval nog afkappen (in plaats van door laten hobbelen zoals ik in mijn voorbeeld doe).

[ Voor 34% gewijzigd door RobIII op 24-07-2007 23:10 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 24 juli 2007 23:27

Acties:

crisp

Devver

Pixelated

You got to love closures:

JavaScript:

function fadeOut(id)
{
    var element = document.getElementById(id);
    if (element)
    {
        var opacity = 100;
        var fadeOutFunction = function()
        {
            opacity--;
            element.style.opacity = (opacity / 100);
            if (opacity > 0)
                setTimeout(fadeOutFunction, 10);
        }

        fadeOutFunction();
    }
}

Intentionally left blank

woensdag 25 juli 2007 07:16

Acties:

Verwijderd

RobIII schreef op dinsdag 24 juli 2007 @ 23:08:
Nu schedule je in 1 keer meteen 100 timeout's. Waarom zou je dat doen?

Omdat 'ie dat begrijpt

woensdag 25 juli 2007 07:44

Acties:

koffie-junk

Topicstarter

Als eerste iedereen erg bedankt voor het meedenken!

robIII, bedankt voor de tip. Ik heb er niet aan gedacht dat dat soort lussen niet even gepauseerd kunnen worden. Kennelijk wel, zie het scriptje van Blues dat werkt (FF, nog niet geprobeert in IE).
Het ging me ook voornamelijk om de transparantie, maar nu heb ik ook gelijk een 'teller' van 100 naar 0.
Heb zelf ook niet aan setInterval gedacht. Werkt inderdaat ook prima.

Blues, ik heb je scriptje even geprobeert en werkt prima.

code:

1	document.getElementById("test").style.opacity=' + ( i / 100);

Is precies wat ik zocht.
Vreemd dat google niks vond. Straks nog eens proberen met het antwoord i.p.v. de vraag, kijken wat 'ie dan over het onderwerp vind.

crisp, zeker bedankt voor het kleine stukje script! Hoewel ik het uiteindelijk zelf wilde maken (met de oplossing van Blues), heb jij het al voor me gedaan. Erg bedankt en ik ga hem gebruiken.

Toch nog even een klein vervolgje;
Is het wel of niet goed om in die for-lus een pauze te stoppen? Ik probeer zelf altijd zo veel mogelijk mijn html-tags (in dit geval de img), zo klein en overzichtelijk mogelijk te houden. Ik probeer daarom zoveel mogelijk lange onclicks e.d. te gebruiken, zoals bijvoorbeeld met setInterval.

specs - home

woensdag 25 juli 2007 08:25

Acties:

crisp

Devver

Pixelated

koffie-junk schreef op woensdag 25 juli 2007 @ 07:44:
Toch nog even een klein vervolgje;
Is het wel of niet goed om in die for-lus een pauze te stoppen? Ik probeer zelf altijd zo veel mogelijk mijn html-tags (in dit geval de img), zo klein en overzichtelijk mogelijk te houden. Ik probeer daarom zoveel mogelijk lange onclicks e.d. te gebruiken, zoals bijvoorbeeld met setInterval.

Eigenlijk zou je helemaal geen inline eventhandler moeten gebruiken aangezien je dan geen scheiding hebt tussen je opmaakcode en behaviour. Daarbij zijn functies herbruikbaar.

Intentionally left blank

woensdag 25 juli 2007 09:45

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

koffie-junk schreef op woensdag 25 juli 2007 @ 07:44:
robIII, bedankt voor de tip. Ik heb er niet aan gedacht dat dat soort lussen niet even gepauseerd kunnen worden. Kennelijk wel, zie het scriptje van Blues dat werkt (FF, nog niet geprobeert in IE).

De lus wordt niet gepauseerd: er worden "in 1 klap" 100 timeouts na elkaar gescheduled met een timeout-waarde die steeds 100ms later/hoger ligt.

Het is dus niet:
>>doe iets, pause, doe iets, pause, doe iets, pause, ...
Maar:
>>Zet timeout over 100ms, zet timeout over 200ms, zet timeout over 300ms, zet timeout over 400ms....

Dat gebeurt zonder pauses; dat de timeouts daarna "om de 100ms" afvuren is dus puur omdat je ze steeds later hebt gescheduled.

[ Voor 26% gewijzigd door RobIII op 25-07-2007 09:48 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 25 juli 2007 09:48

Acties:

Alex)

Is het niet net zo makkelijk om script.aculo.us te gebruiken? Die heeft zo'n fade-functie (en veel andere gave dingen), en is zo geïmplementeerd

JavaScript:

1	new Effect.Fade("element", {parameters zoals duur hier}

We are shaping the future

woensdag 25 juli 2007 10:18

Acties:

Verwijderd

Alex) schreef op woensdag 25 juli 2007 @ 09:48:
Is het niet net zo makkelijk om script.aculo.us te gebruiken? Die heeft zo'n fade-functie (en veel andere gave dingen), en is zo geïmplementeerd
JavaScript:
1
new Effect.Fade("element", {parameters zoals duur hier}

Sure, maar daar leer je natuurlijk geen flikker niks van