Come Realizzare le Animazioni con JQuery e animate
- On Gennaio 17, 2013
- By Fabrizio S.
- In Guide Linguaggi di Programmazione, javascript
- No comments
Classifica Articoli e Pagine
- Lezioni di Elettrotecnica 2.1 Il Metodo del Potenziale ai Nodi
- Come abilitare Gpedit Group Policy Editor di Windows Home Edition
- Lezioni di Elettrotecnica 3.4. Sistemi Trifase a Stella e Triangolo
- Lezioni di Elettrotecnica 3.5. Teorema di Boucherot e Potenza Trifase
- Porta Logica e Tavole di Verità AND, OR, NAND, XNOR, NOT
Privacy e cookie: Questo sito utilizza cookie. Continuando a utilizzare questo sito web, si accetta l’utilizzo dei cookie.
Per ulteriori informazioni, anche su controllo dei cookie, leggi qui: Informativa sui cookie
Per ulteriori informazioni, anche su controllo dei cookie, leggi qui: Informativa sui cookie
Analisi SEO
Geo IP Site
Htaccess
- Redirec Nuova Directory vecchia directory
- Redirect Vecchio Url nuovo url
- Redirect Nuovo Dominio Vecchio Dominio
Guida su Aspnet
Guida al linguaggio di programmazione Aspnet
Lezione 1. Introduzione ad Aspnet
Lezione 2. Il Tool di Amministrazione di Aspnet
Lezione 5. Microsoft Sql Server
Lezione 6. Interfaccia Aspnet e dataset MS Sql
Lezione 7. I Fogli di Stile CSS
Lezione 9. I Dataset e i Datareader
Lezione 10. Eventi di Pagina Asnet
Lezione 13. Validazione Aspnet
Tipi di articoli
Categorie
Categorie
Tag
Anno
Articoli Recenti
- Problema Collegamento HP Smart Stampante Offline Canon Office Jet 8830 Risolto
- Ubuntu Desktop o Server quale versione Linux utilizzare?
- PHP differenze mysqli_fetch_row mysqli_fetch_assoc mysqli_fetch_array
- Problema scanner Canon mp495 Code internal error occurred Scanner driver will be closed 5,202,54 risolto
- Condominio senza Amministratore obbligo di Codice fiscale e adempimenti fiscali.
Materiale Didattico Metodi Matematici per l’Ingegneria
Guida al linguaggi di programmazione PHP
La nostra Guida al linguaggio di programmazione PHP
Lezione 1 Guida introduttiva al linguaggio PHP
Lezione 2 Introduzione ai tipi di dato PHP
Lezione 3. I Cicli Iterativi
Lezione 4. Le funzioni
Lezione 5 Gli Array
Lezione 6. La programmazione a Oggetti
Lezione 7. La programmazione a Oggetti Parte 2
Lezione 8. Il Database Mysql
Lezione 9. Interazione con HTML
Lezione 10 I Cookie Session
Lezione 11 Composer Gestore delle Dipendenze
Lezione 12 Parser Feed XML
Lezione 13. Esistenza Url
Lezione 14. Esistenza Dominio
Lezione 15. Invio Email
Lezione 16. I Namespace
Lezione 17. I Traits
Lezione 18. La Cache
Lezione 19. Architetuttra Rest Api
Lezione 20. Soap WSDL
Lezione 20 BIS. SOAP WSDL ZEND Framework
Lezioni 21. Cloud Computing
Lezioni 22. Sicurezza
Lezione 23. Codice di errore Offset comuni
Guida Linguaggio di programmazione Aspnet
Guida al linguaggio di programmazione Aspnet
Lezione 1. Introduzione ad Aspnet
Lezione 2. Il Tool di Amministrazione di Aspnet
Lezione 3. Pagine Master
Lezione 4. Visual Earth
Lezione 5. Microsoft Sql Server
Lezione 6. Interfaccia Aspnet e dataset MS Sql
Lezione 7. I Fogli di Stile CSS
Lezione 8. I Mashup
Lezione 9. I Dataset e i Datareader
Lezione 10. Eventi di Pagina Asnet
Lezione 11. Il DataBinding
Lezione 12. Linq
Lezione 13. Validazione Aspnet
Guida linguaggio di programmazione Ajax
In queste pagina la nostra guida al linguaggio di programmazione Ajax
Lezione 1 Introduzione ad Ajax
Lezione 2 L'oggetto XMLHTTPREQUEST
Lezione 3 la Shoutbox
Rete Web Funzionamento e Definizioni
In questa pagina tratteremo tutte le definizioni e il funzionamento del World Wide Web
HTTPS e Certificati di Sicurezza
Nat Network Address Translation
TTL time to load o tempo di risposta del server di cosa tratta
Guida su Action Script
Guida Agli Action Script
E questa è la nostra Guida Sugli ActionScript con un esempio finale realizzato in Flash
Lezione 1 Introduzione agli Action Script
Lezione 2. Opetatori, funzioni , cicli iterativi
Lezione 3 Variabili Comportamenti. Esempio Sito Web
Tipi di articoli
Categorie
Categorie
Tag
Anno
Legge sui Cookies
Utilizziamo i cookie sul nostro sito Web per offrirti l'esperienza più pertinente ricordando le tue preferenze e ripetendo le visite. Cliccando su "Accetta" acconsenti all'uso di TUTTI i cookie. Puoi visionare la nostra politica sui Cookie alla Pagina sulla Cookie Policy . Nella pagina potrai trovare tutti i cookie che il sito utilizza e il trattamento che viene effettuato sui cookie stessi , sul sito dove vengono immagazzinati e sul trattamento a cui sono sottoposti.Per ogni dubbio o approfondimento ti invitiamo a contattarci grazie al nostro modulo di contatto
Privacy & Cookies Policy
Privacy
Questo sito Web utilizza i cookie per migliorare la tua esperienza durante la navigazione nel sito Web. Di questi cookie, i cookie classificati come necessari vengono memorizzati nel browser in quanto sono essenziali per il funzionamento delle funzionalità di base del sito Web. Utilizziamo anche cookie di terze parti che ci aiutano ad analizzare e capire come utilizzi questo sito web. Questi cookie verranno memorizzati nel tuo browser solo con il tuo consenso. Hai anche la possibilità di disattivare questi cookie. Ma la disattivazione di alcuni di questi cookie potrebbe avere un effetto sulla tua esperienza di navigazione.
I cookie necessari sono assolutamente essenziali per il corretto funzionamento del sito web. Questa categoria include solo i cookie che garantiscono funzionalità di base e caratteristiche di sicurezza del sito web. Questi cookie non memorizzano alcuna informazione personale.
Tutti i cookie che potrebbero non essere particolarmente necessari per il funzionamento del sito Web e vengono utilizzati specificamente per raccogliere dati personali dell\'utente tramite analisi, pubblicità, altri contenuti incorporati sono definiti come cookie non necessari. È obbligatorio ottenere il consenso dell\'utente prima di eseguire questi cookie sul tuo sito web.
%d blogger hanno fatto clic su Mi Piace per questo:
Fabrizio S.
Share post:
Come Realizzare le Animazioni con JQuery e animate
E veniamo adesso a parlarvi di un lato molto importante di Jquery ossia le animazioni, e quando diciamo animazioni intendiamo proprio gli effetti dinamici che vediamo a video. Cerchiamo adesso un po’ come sono fatte le animazioni in Jquery partendo dagli effetti di base che sono proprio che sono le funzioni hide , show e toggle che vengono implementate nel seguente modo
.hide (duration [, callback])
.hide ( [duration] [,easing] [, callback])
.show (duration [, callback])
.show ( [duration] [,easing] [, callback])
.toggle (duration [, callback])
.toggle ( [duration] [,easing] [, callback])
Dove
Duration ha valori fast o slow fra apici o un numero in millescondi per esprimere la durata
Callback è un valore opzionale che indica la funzione invocata al termine dell’animazione
Esaing invece controlla la velocità dell’animazione dato che alcuni sistemi o piattaforme mobili come nel caso dei cellulari necessiatano velocità ridotte.
SLIDE con Jquery
Con Jquery è possibile fare una vera e propria in slide in maniera semplicissima grazie proprio alle funzioni native della libreria nel seguente e semplice modo.
SlideUp(duration [, callback])
.SlideUp ( [duration] [,easing] [, callback])
.Slidedown (duration [, callback])
.Slidedown ( [duration] [,easing] [, callback])
.SlideToggle (duration [, callback])
.SlideTogge ( [duration] [,easing] [, callback])
Dove I valori delle parentesi sono gli stessi dell’altro caso con la differenza che si ha Up quando la slide viene mostrata down quando si passa ad un’altra e toggle per invertire nel caso di due immagini.
Alla stessa maniera funziona la dissolvenza che in inglese si dice appunto fade e la sintassi dei suoi metodi è veramente molto simile e si ha .
.fadeUp(duration [, callback])
.fadeUp ( [duration] [,easing] [, callback])
.fadeIn (duration [, callback])
.fadeIn( [duration] [,easing] [, callback])
.fadeTo (duration [,opacity [, callback])
Con opacity che rappresenta un valore deciamle tra 0 e 1
Mentre per interrompere l’animazione si ricorre al metodo .stop che ha la seguente sintassi
.stop([queque] [clearQueque][,jumpToEnd])
Dove
come potete vedere abbiamo espressamente parlato di coda degli effetti, per un semplice motivo con Jquery si carica una coda di funzioni e dopo si interagisce con le funzioni che vi abbiamo spiegato sopra, vediamo meglio questo con un semplice esempio
<html xmlns=”http://www.w3.org/1999/xhtml”><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /><title>Guida jQuery – Animazioni 1</title>
<link rel=”stylesheet” href=”reset.css” type=”text/css” />
<link rel=”stylesheet” href=”base.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<style type=”text/css”>
ul {
list-style-type: disc;
padding: 10px;
background-color:#FFFFFF;
}
ul li {
margin-top: 3px;
margin-bottom: 3px;
line-height: 16px;
}
#box {
width:400px;
height:200px;
background-color:#CCCCCC;
border:1px solid #666666;
display:none;
}
</style>
<script type=”text/javascript”>
function mostra_box () {
$(“#box”).show(“slow”);
}
function nascondi_box () {
$(“#box”).hide(“slow”,function () {
alert(“Animazione conclusa!”);
});
}
function alterna_box () {
$(“#box”).toggle(“slow”);
}
function alterna_box_no_anim () {
$(“#box”).toggle();
}
</script></head>
<body>
<h1>Esempi Animazioni: effetti di base </h1>
<p> </p>
<ul>
<li><a href=”javascript:mostra_box();”>Mostra il box </a></li>
<li><a href=”javascript:nascondi_box();”>Nascondi il box con funzione di callback</a></li>
<li><a href=”javascript:alterna_box();”>Alterna fra mostra e nascondi box</a></li>
<li><a href=”javascript:alterna_box_no_anim();”>Alterna fra mostra e nascondi box senza animazioni</a></li>
</ul>
<p> </p>
<div id=”contenitore”>
<div id=”box”>Box con testo</div>
</div>
<p> </p>
<p> </p>
<h3>Codice:</h3>
<p> </p>
<pre>
function mostra_box () {
$(“#box”).show(“slow”);
}
function nascondi_box () {
$(“#box”).hide(“slow”,function () {
alert(“Animazione conclusa!”);
});
}
function alterna_box () {
$(“#box”).toggle(“slow”);
}
function alterna_box_no_anim () {
$(“#box”).toggle();
}
</pre>
</body></html>
Come potete vedere la pratica poi è piu’ semplice della teoria. Mentre un possibile esempio con i fade potrebbero essere i seguenti
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /><title>Guida jQuery – Animazioni 2</title>
<link rel=”stylesheet” href=”reset.css” type=”text/css” />
<link rel=”stylesheet” href=”base.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<style type=”text/css”>
ul {
list-style-type: disc;
padding: 10px;
background-color:#FFFFFF;
}
ul li {
margin-top: 3px;
margin-bottom: 3px;
line-height: 16px;
}
#box {
width:400px;
height:200px;
background-color:#CCCCCC;
border:1px solid #666666;
}
</style>
<script type=”text/javascript”>
function test_slideToggle () {
$(“#box”).slideToggle(“slow”);
}
function test_fadeOut() {
$(“#box”).fadeOut(“slow”);
}
function test_fadeIn() {
$(“#box”).fadeIn(“slow”);
}
function test_fadeTo () {
$(“#box”).fadeTo(“slow”,0.5,function () {
alert(“Animazione conclusa!”);
});
}
</script></head>
<body>
<h1>Esempi Animazioni: effetti specifici </h1>
<p> </p>
<ul>
<li><a href=”javascript:test_slideToggle();”>Test .slideToggle() </a></li>
<li><a href=”javascript:test_fadeOut();”>Test .fadeOut() </a></li>
<li><a href=”javascript:test_fadeIn();”>Test fadeIn()</a></li>
<li><a href=”javascript:test_fadeTo();”>Test .fadeTo()</a></li>
</ul>
<p> </p>
<div id=”contenitore”>
<div id=”box”>Box con testo</div>
</div>
<p> </p>
<p> </p>
<h3>Codice:</h3>
<p> </p>
<pre>
function test_slideToggle () {
$(“#box”).slideToggle(“slow”);
}
function test_fadeOut() {
$(“#box”).fadeOut(“slow”);
}
function test_fadeIn() {
$(“#box”).fadeIn(“slow”);
}
function test_fadeTo () {
$(“#box”).fadeTo(“slow”,0.5,function () {
alert(“Animazione conclusa!”);
});
}
</pre>
</body></html>.
Mentre base.css per entrambi è
/**
* %%Specific Body Style
*/
body,html {
}
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
margin:40px;
}
/**
* %%Layout
*/
#container {
width: 60% ;
}
/**
* %%Typography
*/
table {
font-size: 1em;
}
/* standards redesign */
h1 {
font-size:26px;
font-weight:bold;
}
h2 {
font-size:20px;
}
h3 {
font-size:16px
}
p {
line-height:150%;
}
strong {
font-weight:bold;
}
del {
text-decoration: line-through;
color: #666;
}
cite, em, dfn {
font-style:italic;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
a abbr, a acronym {
border: none;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
}
abbr[title], acronym[title], dfn[title] {
cursor: help;
border-bottom: 1px dotted #ccc;
}
code, kbd, samp, pre, tt, var {
font-size: 92%;
font-family: monaco, “Lucida Console”, courier, monospace;
}
/* dimensions */
small, .small, sup, sub {
font-size:80%;
}
.big {
font-size:145%;
}
.thin {
font-weight: lighter;
}
/* colors */
.red {
color:#F00;
}
.orange {
color:#F60;
}
.blue {
color:#03F;
}
.green {
color:#0C0;
}
/* various styles */
.underline {
text-decoration:underline;
}
.debug {
outline:1px solid #F00;
}
.highlight {
background-color:#FF6; /* bright yellow */
padding:0px 2px;
}
.quiet {
color:#666;
}
.loud {
color:#000;
}
/* on demand structure */
fieldset {
border:1px solid #ccc;
width:95%;
padding:7px;
margin-top: 10px;
margin-bottom: 10px;
}
fieldset legend {
padding:0 3px;
font-weight:bold;
}
form input[type=’text’], form select, form textarea {
border:1px solid #ccc;
}
pre {
background: #EEE;
padding: 5px;
border: 1px solid #CCCCCC;
}
Mentre reset.css per entrambi è
La novità forse piu’ interessante di Jquery è forse quella di permettere la creazione di animazioni personalizzate, sempre piu’ spesso si vede infatti per il Web questo tipo di Animazioni personalizzate. Ne facciamo un piccolo esempio anche noi utilizzando il metodo animate, una possibile sintassi potrebbe essere la seguente
oppure potrebbe fare anche cose piu’ complicate come in questo esempio qui sotto dove a fine animazione lancia una finestra di popup che avvista che l’animazione stessa è stata completata.
</html>
</body>
Condividi:
Mi piace:
Correlati
Velocità pagina web Defer parsing of JavaScript
Ci sono diverse tecniche che possono essere utilizzati per rinviare analisi del codice JavaScript. La tecnica più semplice e preferito è semplicemente Rimanda caricamento di JavaScript finché è necessario. Una. Leggi ancora…
Condividi:
Mi piace:
Continue Reading
Interazione e passaggio di parametri fra JSDK e PHP SDK nelle applicazioni facebook
E ora vi parliamo un po’ delle applicazioni facebook usando la JSDK dove il J sta per Javascript e PHP SDK ossia le reference di Javascriprit e php. Purtroppo come. Leggi ancora…
Condividi:
Mi piace:
Continue Reading
Le Graph Api nelle applicazioni facebook
E quindi veniamo adesso a questo capitolo dedicato alle Graph Api che sono il vero cuore di Facebook e le vediamo in questo caso tramite applicazioni Javascript. Ma prima di. Leggi ancora…
Condividi:
Mi piace:
Continue Reading
Creare applicazioni facebook con Javascript Method FB.
Ieri ci siamo concentrati nello sviluppare applicazioni utilizzando una tecnologia lato Server nello specifico abbiamo utilizzato PHP e quindi le librerie che facebook mette a disposizione e quindi le SDK.. Leggi ancora…
Condividi:
Mi piace:
Continue Reading