Aumento opacità

Ciao a tutti,
Sul mio sito ho creato una tabella che indica tutte le gare(di corsa) future che andranno svolte, ma siccome queste sono tante e occupano molto spazio della pagina ho fatto si che la lista delle gare fosse nascosta e che fosse resa visibile solo al click di una freccetta che ho posto vicino al titolo.
Lo script che ho usato è il seguente:

function garefuture(){
	document.getElementById("garefuture").style.display="inline";	
}
		
function nascondigarefuture(){
	document.getElementById("garefuture").style.display="none";
}

E fin qui tutto ok.
Vorrei però rendere meno brusca l'apparizione della lista (senza creare un dropdow menu) facendo aumentare nell'unità di secondo l'opacità, rendendo più morbida l'apparizione della scritta.

Con quel poco che so di programmazione procedurale avevo creato uno script del genere che ovviamente non funziona, ma ve lo posto comunque per farvi fare due risate

function garefuture(){
	document.getElementById("garefuture").style.display="inline";
	document.getElementById("garefuture").style.opacity="0.1";
        var x=document.getElementById("garefuture").style.opacity;
while(x<1.0){
x=x+1;
document.getElementById("garefuture").style.opacity=x;
}
}

Ovviamente non teneva conto della durata di esecuzione e quant'altro... Sapete voi un modo per aumentare l'opacità gradualmente?

Grazie in anticipo.

[alemoppo]

Il tuo script non è totalmente errato. Il concetto c'é . Devi soltanto aggiungere la gestione del tempo. L'unica cosa che non va è che l' "opacity" va da 0 a 1, e incrementarlo di 1 (x = x+1;), significa che quella riga viene eseguita al più una volta soltanto!

Per avere una gestione del tempo, dovresti usare setTimeout() o setInterval().

Molto più facilmente, puoi usare .animate() di jQuery, che però prima dovrai includerlo nella pagina.

Ciao!

EDIT:

Dimenticavo: puoi usare anche css3, con le "-x-transition", anche se non è supportata dalle (relativamente) vecchie versioni dei browser.

Oppure per restare in tema jQuery puoi usare fadeIn o ancora slideDown.

[tdef]

O usare i fogli di stile nel modo classico, ma attento perché IE non è che digerisca allo stesso modo degli altri browser le direttive per opacity.

[alemoppo]

O usare i fogli di stile nel modo classico, ma attento perché IE non è che digerisca allo stesso modo degli altri browser le direttive per opacity.

Come lo faresti in modo "classico"? (= no css3, no js).

Ciao!

Grazie dei consigli!
Preferisco tenere Javascript normale, solo che non ne vengo fuori con le temporizzazioni!
Qualcuno riuscirebbe a spiegarmi come si fa? O a crearmi il piccolo script e spiegarmi come abbia fatto?
La spiegazione è importante perchè non mi piace copiare e basta


Grazie in anticipo!

[karl94]

Io ti consiglierei le transizioni o le animazioni CSS3, ma se vuoi proprio usare uno script devi sfruttare la funzione setInterval, o meglio ancora la funzione requestAnimationFrame per indicare al browser di eseguire ogni frame la tua funzione che eseguirà l'animazione (in questo caso incrementare il valore della proprietà opacity). Se cerchi un attimo trovi sicuramente ottime guide e spiegazioni al riguardo, verifica solamente che siano recenti (ci sono in giro centinaia di script che andavano bene nel secolo scorso, quando ancora c'era Netscape).

In effetti con le transizioni CSS3 mi sembra abbastanza facile, ma come faccio ha cambiare da CSS le proprietà di un elemento, se l'evento fa parte di un altro elemento?
Nel senso: se la tabella da far "comparire", viene mostrata al click sopra un altro elemento.
O esiste un evento apposta?

[tdef]

@alemoppo

img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

da http://www.w3schools.com/css/css_image_transparency.asp che è anche cross browser fino ad un certo punto.
Tieni presente che però è complicato gestire gli elementi non dichiarati inline (dentro l'elemento intendo <img style='... per capirci) c'è riuscito se non ricordo male Gabriele Romanato ma bisogna cercare nel suo immenso blog.

@runner devi farti dentro il javascript una tabella contenente i riferimenti degli elementi da modificare, ad esempio applicando getElementsByName() dentro un ciclo for prendi tutti gli elementi a partire da quello principale fin dentro il più nidificato, li cicli dentro un array e poi li richiami dai suoi elementi.
Se la tabella è il tuo elemento padre, devi ciclare tutti i suoi figli, presumo le celle (TD) e inserirle nel database degli elementi. Poi cambi l'opacità in funzione di quale elemento hai cliccato. Mi pare un percorso a ostacoli francamente anche se più razionale che mettere onclick un po' dappertutto.

[alemoppo]

@alemoppo

img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

da http://www.w3schools.com/css/css_image_transparency.asp che è anche cross browser fino ad un certo punto.
Tieni presente che però è complicato gestire gli elementi non dichiarati inline (dentro l'elemento intendo <img style='... per capirci) c'è riuscito se non ricordo male Gabriele Romanato ma bisogna cercare nel suo immenso blog.

Lui vuole fare:

Vorrei però rendere meno brusca l'apparizione della lista

Ciao!

[karl94]

In effetti con le transizioni CSS3 mi sembra abbastanza facile, ma come faccio ha cambiare da CSS le proprietà di un elemento, se l'evento fa parte di un altro elemento?
Nel senso: se la tabella da far "comparire", viene mostrata al click sopra un altro elemento.
O esiste un evento apposta?

In puro CSS non è possibile, almeno con i selettori che sono attualmente a disposizione. Però puoi semplicemente mantenere lo script originario (aggiungendo la modifica della proprietà CSS opacity) e delegare l'animazione soltanto al CSS (sfruttando le proprietà CSS transition-*). In questo modo il sito sarà anche usabile da chi non usa un browser che supporti le transizioni CSS, semplicemente non osserverà l'animazione.
Rimane comunque brusca l'apparizione dell'elemento, in quanto il contenuto immediatamente successivo viene schiaffato sotto da un frame all'altro.

[tdef]

Quì c'è una bellissima guida (in inglese) che spiega come fare e cosa è "transizionabile" http://www.webdesignerdepot.com/2010...ansitions-101/ ovviamente IE... poco o nulla, ovvero forse dovrebbe vedere qualche cosa partire dalla 9 ma la faccenda è controversa.
Per gli altri browser questa tabella indica cosa usare e come

Chrome
1.0 (-webkit prefix)

Firefox
4.0 (2.0) (-moz prefix)
16.0 (16.0) (no prefix)

Internet Explorer
10.0 (no prefix)

Opera
10.5 (-o prefix)

Safari
3.2 (-webkit prefix)

Usare un attesa in javascript non so quanto possa funzionare, perché comunque l'applicazione andrebbe a scatti, clicco inizia a cambiare, c'è un'attesa, poi di botto il cambiamento.
Meglio sarebbe allora un ciclo in loop che cambia pian piano il colore da un massimo ad un minimo, allora sì sembrerebbe che ci sia una transizione.
Tipo...

var arrayColori = ['fff', 'f0f0f0', 'f5f5f5', 'f9f9f9', '999'];
for (i=0; i<=arrayColore.length; i++)
   document.getElementById("garefuture").style.backgroundColor= '#' + arrayColori[i];

è solo un esempio di concetto non l'ho provato ovviamente e non da la trasparenza.

[tdef]

PS qui ho trovata una guida M$ che spiega come fare le transizioni IE 10
http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx
e dice specificatamente che non serve più il vendor prefix -ms solo che comunque nno ne ho trovato traccia di prove con -ms- ovviamente rimane sempre da usare filter: come l'esempio che riportato sù ma solo per rendere opaca l'immagine non per la transizione.

[karl94]

Quì c'è una bellissima guida (in inglese) che spiega come fare e cosa è "transizionabile" http://www.webdesignerdepot.com/2010...ansitions-101/ ovviamente IE... poco o nulla, ovvero forse dovrebbe vedere qualche cosa partire dalla 9 ma la faccenda è controversa.
Per gli altri browser questa tabella indica cosa usare e come

È un articolo un po' vecchiotto: sono passati più di due anni e nel mentre le cose si sono evolute non di poco per quanto riguarda le varie implementazioni. Per verificare rapidamente il supporto di una determinata funzionalità fra i vari browser più comuni consiglio questo sito: http://caniuse.com/#feat=css-transitions.

Usare un attesa in javascript non so quanto possa funzionare, perché comunque l'applicazione andrebbe a scatti, clicco inizia a cambiare, c'è un'attesa, poi di botto il cambiamento.

L'uso delle funzioni che ho citato qualche messaggio prima è necessario. Ovviamente nel caso della funzione setInterval bisogna scegliere un intervallo non troppo lungo altrimenti andrebbe appunto a mancare la fluidità nell'animazione, un valore opportuno potrebbe essere un quarantesimo od un sessantesimo di secondo; con la funzione requestAnimationFrame invece il problema della scelta non si pone poiché è il browser che si occupa di richiamare la funzione solamente quando è necessario un nuovo frame. L'uso di quest'ultima è quindi preferibile, poiché sviluppata appositamente per questo scopo e non c'è quindi per esempio il rischio di sovraccaricare il processore con calcoli che non verranno mai utilizzati per generare frame.

Meglio sarebbe allora un ciclo in loop che cambia pian piano il colore da un massimo ad un minimo, allora sì sembrerebbe che ci sia una transizione.
Tipo...

var arrayColori = ['fff', 'f0f0f0', 'f5f5f5', 'f9f9f9', '999'];
for (i=0; i<=arrayColore.length; i++)
   document.getElementById("garefuture").style.backgroundColor= '#' + arrayColori[i];

è solo un esempio di concetto non l'ho provato ovviamente e non da la trasparenza.

Uno script del genere non funziona, poiché durante l'esecuzione degli script il browser non effettua alcun rendering grafico della pagina, lo script quindi cambia il valore della proprietà colore di sfondo svariate volte ma il browser cambierà il vero colore di sfondo sullo schermo solo al prossimo rendering, quindi alla fine l'utente visualizzerà solamente l'ultimo colore assegnato (in questo caso grigio).

[tdef]

Non mi sembra sia cambiato nulla al riguardo, internet explorer ha inserito le transizioni solo dalla versione 10 per gli altri le hanno sempre supportate, bastava usare i vendor prefix quando non supportate direttamente.
Per quanto riguarda il tuo modello di implementazione be dipende da come l'hai previsto, ma secondo me usare un'attesa come proposto da qualcuno la fa andare comunque a scatti.
Ci sono esempi in giro per la rete specialmente usando jquery, vedi tu, ma secondo me l'idea di usare i fogli di stile rimane la migliore poi vedi tu ovviamente.

Adesso sto dando un occhiata alla requestAnimationFrame, il jquery mi ispira parecchio, però volevo studiarmelo per bene quando ho più tempo.
Semmai mi prendo qualcosa in rete e lo adatto al mio sito... Vedrò :D