Jquery problema logo animato

[donnesulweb]

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:

1. 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