- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Jquery problema logo animato
-
Jquery problema logo animato
Salve a tutti:)
Ho l'esigenza di animare un logo nel seguente modo:
All'apertura della pagina il logo si unisce (è diviso in 2 immagini) un'immmagine proviene da sinistra (fuori dallo schermo:)) e l'altra immagine dall'alto.Questo è il mio codice css```
#logo {
position:absolute;
padding:0;
left:-16px;
top:7px;
}#logo1 {
position:absolute;
padding:0;
left:33px;
top:7px;
}e questo è lo script jquery:
$('#logo').hide().animate({"left": "-550px"}, 100)
.fadeIn("slow").animate({"left": "-16px"}, 1400, 'easeOutBounce');$('#logo1').hide().animate({"top": "-88px"}, 100)
.fadeIn("slow").animate({"top": "7px"}, 1200, 'easeOutBounce');Il problema è che il browser carica prima il codice html/css e per un attimo il logo appare come impostato dai css. Per far si che questo non accada dovrei impostare il logo con display:none nei css ma in questo caso se javascript fosse disattivato il logo non si vedrebbe. Come posso risolvere il problema? Grazie
-
Ciao,
il mio consiglio è il seguente:
-
aggiungi una classe al div del logo, chiamandola ad esempio "hideme";
$('#logo').addClass("hideme");
2. successivamente modifica il tuo css inserendo:
.hideme {display:none;}
In questo modo, assegnerai una classe via javascript(quindi se js è disattivato la classe non esisterà e il log verrà mostrato). Spero di esserti stato utile. WYM
-
-
Ciao il problema rimane il medesimo perchè il browser carica javascript dopo (o almeno credo...)
In entrambi i casi il logo appare per un istante e poi parte l'animazione...
Altri consigli a riguardo?
Grazie
-
Ciao,
[...]
Domanda: hai messo tutto in Document.ready giusto?
-
Ciao!
allora, secondo me quella del "display: none" non è una cattiva idea.
io farei così: immagine con "display: none", poi fai in modo che l'animazione jquery inizi non prima che TUTTA la pagina è stata completamente caricata dal browser:$(document).ready(function(){ //quì fai partire l'animazione. });
per ovviare il problema del javascript disattivato, puoi sempre utilizzare il tag "<noscript></noscript>", dove all'interno ci metti il codice dell'immagine. Tutto quello che c'è all'interno di quel tag viene eseguito solo ed esclusivamente se l'utente ha disabilitato il javascript.
-
Ciao e grazie ad entrambi per il supporto:)
Direi che la soluzione ideale è display none e per i browser senza javascript il tag <noscript></noscript> e all'interno inserire il logo statico.;)
Ciao e grazie ancora