• User

    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

  • User

    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

  • User

    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


  • User

    Ciao,

    [...]

    Domanda: hai messo tutto in Document.ready giusto?


  • User

    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.


  • User

    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