Salve Forum,
Ho fatto una ricerca ma non ho trovato nulla.. in pratica mi servirebbe uno script javascript/jquery che all'avvio di una pagina, si apre un immagine con effetto dissolvenza per un tot di tempo (pochi secondi), e che poi si chiude sempre con l'effetto dissolvenza senza cliccare nulla.. è fattibile?
Purtroppo non ho esempi pratici.. è urgente spero che possiate darmi una mano entro breve..
Scusate se uppo.. ma nessuno sa nulla?..
Quindi le istruzioni le prepariamo dentro una funzione e le facciamo attivare col gestore d' evento ONLOADOriginariamente inviato da FinalGeek
... uno script ... che all'avvio di una pagina, ...
E rimaniamo ai primi passi, per il momento.
Processando questo, l' immagine non sarà visibile in quanto attribuita dello style="opacity: 0;"
ma provalo con un Netscape/Firefox/Safari recente perché per Internet Explorer (8 e precedenti) dovremmo anche aggiungere
style="opacity: 0; filter: alpha(opacity=0);"
Quindi modifica il Tag <body> in questo: <body onload="esegui();">codice:<script> var opacita = 1; function esegui(){ document.images["avatar"].style.opacity = opacita; } </script> <body></body>
e JavaScript farà assumere alla opacity il valore dato alla Variabile var opacita (prova anche a dare var opacita = 0.4; ).
Successivamente, e ricorrendo a un Timer, faremo incrementare questo Valore gradatamente.
Grazie mille per la tua risposta Enzaccio;
Ho creato una pagina di prova qui: http://zangirolami.altervista.org/prova.php mi mancherebbe la parte col timer, ovvero che carica gradualmente l'opacity, e che poi faccia la stessa cosa in senso opposto, dissolvendola.
Se sei così gentile da illustrarmi come fare, te ne sarei grato
P.s: Il codice non è necessario che sia compatibile con tutti i browsers, specie con IE che da sempre problemi.. mi basta solo Chrome poiché è un sito che devo esporre dal mio pc, e quindi userò Chrome
Ecco il Timer entrare in gioco!
E la doppia istruzione per IExplorer; non è necessario fare una detection del tipo di Browser in uso, basta aggiungere la riga per quella famiglia di Browser, non "blocca" con gli altri.
opacity va da 0 a 1 con passi decimali;
filter: alpha(opacity=Valore); va da 0 a 100
per evitare una duplicazione della Variabile var opacita la gestisco, una unica, da 0 a 100 ma la divido per 100 nel momento di assegnarla alla opacity
Esistono in JavaScript setInterval() e setTimeout() per impostare una temporizzazione (il "clock" esiste già nel computer con l' orologio).
Qui uso setTimeout() e la funzione "caricandolo", richiama se stessa (ricorsione).
Giocando sul tempo di timeout e sul passo di incremento, puoi affinare l' effetto.codice:<!doctype html> <html> <head> <script> var opacita = 0; function esegui(){ document.images["avatar"].style.opacity = opacita/100; document.images["avatar"].style.filter = "alpha(opacity=" + opacita + ")"; //alert('document.images["avatar"].style.opacity = ' + document.images["avatar"].style.opacity + '\ndocument.images["avatar"].style.filter = ' + document.images["avatar"].style.filter); opacita = opacita+10; setTimeout("esegui();", 1000); //tempo espresso in millisecondi 2000 = 2 secondi } </script> </head> <body style="background: #000;" onload="esegui();"> <div align="center"></div> </body> </html>
Liberando l' alert() dal commento // avrai l' opacità in lettura ad ogni "colpo".
Sì, poi il processo dovrà arrestarsi quando si raggiunge l' intera opacità, altrimenti l' attività continua ad impegnare il computer, inutilmente, in sottofondo.
Scrivo a tratti perché mi disconnette spesso; e poi comunque impari meglio. Non è il caso di andare sempre a scaricare tonellate di JQuery per fare qualcosa ...
Ok grazie al tuo aiuto, ho raggiunto la prima parte del mio obiettivo, ho diminuito a 1/4 il valore da te impostato (250 anzichè 1000) in modo da rendere più fluido l'effetto.
Adesso si mostra così: http://zangirolami.altervista.org/prova.php
Ora ci sarebbe la seconda parte, cioè che quando raggiunge la massima opacità, torna in ordine decrescente a 0, nascondendosi. Lo farei io, ma non ho idea di come fare.. ho capito come incrementare, ma non come diminuire..
Grazie mille per l'aiuto che mi stai dando comunque
Usate setInterval per queste cose, non setTimeout...
Ho risolto con jquery..
in <head>:
mentre in <body>:codice:<script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#box").fadeIn(5000).delay(3000).fadeOut(2000); }); </script>
Grazie comunque dell'aiuto Enzacciocodice:[img]/images/path/img.png[/img]
Permessi di invio
Rispondi quotando