Background scorrevole in una <div>

[Ghizza]

Buongiorno,
sto cercando un semplice script che al caricamento della pagina faccia scorrere orizzontalmente il background di una <div> (costituito da una singola .jpg) in modo che esso parta da una posizione, scorra all'interno e si fermi (senza alcun loop o seconda immagine).
Ho visto diversi slideshow con il cosiddetto "effetto Ken Burns" (es. www.slideshowify.com) ma sono tutti strutturati a gallery e la maggior parte fanno lo scaling della .jpg compromettendone la qualità.
Grazie a tutti.

 

[criric]

Ciao, puoi utilizzare la funzione animate()

$(".panoramica").animate({
            backgroundPosition:"-1250px"
        },12500);

Ho provato con questo esempio online.

 

[Ghizza]

Grazie per la risposta,
nel frattempo ho trovato quest'altra soluzione: http://jsfiddle.net/bv58zbqb/
Secondo te quale è la migliore e quella più "crossbrowser"?

 

[luca171181]

Ciao Ghizza, entrambi i metodi sono validi, per mio parere il metodo che hai linkato è ottimo in quanto la proprietà del css (left) non ha problemi di compatibilità crossbrowser, il metodo di Criric è altrettanto valido, un saluto spero di esserti stato d'aiuto

 

[criric]

Come dice Luca i metodi sono entrambi validi.
te ne posto un'altro che usa una proprietà dei css3 ( sicuramente non compatibile con le versioni vecchie di IE)

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".panoramica").css("background-position","-1750px");
    });
</script>
<style type="text/css">
    div.panoramica {
        margin:auto;
        width: 550px;
        height: 188px;
        background-image: url("panoramica-monte-piana.jpg");
        transition: all 7.0s ease-in-out 0s;
        background-position:0;
    }
</style>
<div class="panoramica"></div>