Fogli di stile CSS Guida sito sviluppatori mostrano, nascondono e animano oggetti su un sito Web. Se la pagina è un elemento DIV nascosto, è possibile utilizzare JavaScript per rendere quel DIV apparire gradualmente cambiando il suo stile di visualizzazione da "none" per "blocco" utilizzando un timer. Ci vuole un po' di conoscenza programmazione per realizzare questo obiettivo. Utilizzando jQuery, una libreria JavaScript cross-browser, è possibile generare questo effetto di fade-in impressionante utilizzando una singola riga di codice.

Istruzioni

1

Passare al sito Web di jQuery e Mostra loro codice jQuery. Sembra che all'interno della finestra del browser. Fare clic su menu "File" del tuo browser e scegliere "Salva come". Si apre la finestra "Salva con nome". Questa finestra consente di visualizzare le cartelle sul disco rigido.

2

Individuare la cartella che contiene un documento HTML che si desidera utilizzare per il test. Fare doppio clic su tale cartella per aprirla e quindi fare clic su "Salva" per salvare il file jQuery in tale cartella.

3

Lanciare un editor HTML o blocco note. Aprire il documento HTML e incollare il seguente codice nella sezione "head" del documento:

< script type = "text/javascript" / >

Questa dichiarazione rende disponibili all'interno del codice la libreria jQuery.

4

Aggiungere il seguente codice HTML nel documento "< body >" sezione:

< div id = "MyDiv1" class = "hidden" >

< p > paragrafo all'interno del div </p >

< / div >

< input id = "Button2" type = "button" valore = "button2" onclick = "return animateStyle('MyDiv1')" / >

La prima riga di codice crea un DIV. Quel div contiene un paragrafo e un pulsante. Il pulsante, quando cliccato, passa id di DIV a una funzione JavaScript denominata "animateStyle."

5

Inserire questa funzione di "animateStyle" nella sezione "script" del documento:

Function animateStyle(divID) () {

$("#" + divID).css({"display": "block", "opacity": "0"}).animate ({"opacità": "1"}, 3000);

}

Questa funzione contiene un'istruzione singola jQuery. Il "CSS" funzione, visto all'inizio dell'istruzione, cambiamenti di stile di visualizzazione di DIV al "blocco" e quindi imposta l'opacità a zero. Ciò mantiene il DIV invisibile momentaneamente. La funzione "animate" anima la proprietà opacity di DIV modificando il livello di opacità da zero al 100%. Questo crea l'effetto di fade-in. L'ultimo valore nell'istruzione, 3000, è il valore di "durata". Determina quanto tempo ci vuole per il DIV dissolvenza in entrata.

.

6

Incollare il codice CSS riportato di seguito nella sezione "head" del documento:

< style type = "text/css" >

Hidden {display: none;}

< / stile >

Il DIV, creato nella sezione "corpo", fa riferimento a questa classe. Questa classe rende il DIV invisibile impostando il valore di visualizzazione su "none".

7

Salvare il documento e aprirlo in qualsiasi browser. Il DIV che contiene il paragrafo non apparirà perché la classe CSS, "divStyle" imposta il valore di visualizzazione su "nessuno. Fare clic sul pulsante "Cambia stile". Il codice jQuery corre e cambia lo stile di visualizzazione di DIV per "bloccare". Questo rende il DIV che contiene il paragrafo fade in lentamente.

Consigli & Avvertenze

• Modificare proprietà duration dell'animazione su qualsiasi valore che ti piace modificando "3000" a un altro numero. Valori più alti rendono l'animazione eseguire più e più brevi di accelerarlo. Potrebbe essere necessario sperimentare tali valori per trovare uno che crea l'effetto di fade-in desiderato senza prendere troppo a lungo.