Jquery problema logo animato

donnesulweb

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

webyourmind

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

donnesulweb

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

webyourmind

Ciao,

[...]

Domanda: hai messo tutto in Document.ready giusto?

bennyzz

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.

donnesulweb

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