Ciao ti ho scritto un piccolo plugin jquery per poter gestire la situazione.
Parto dal markup:
HTML:
<div class="rail">
<div id="imhappy"></div>
</div>
Molto semplicemente il markup deve essere composto da un elemento "rotaia" (il div class rail per l'appunto) che servirà a fare da percorso e l'elemento che fa il movimento.
Il plugin è impostato per agire su un unico elemento da muovere per volta, per cui è importante referenziarlo con l'attributo id.
CSS:
Codice:
.rail{
position:relative;
overflow:hidden;
height:100px;
}
#imhappy{
position:absolute;
left:0px;
width:100px;
height:100px;
background-color:#008000;
}
Ok, allora le proprietà fondamentali che .rail
deve possedere sono il
position su
relative e l'
overflow su
hidden (quest'ultimo, se la rotaia non ha una dimensione fissa fa si che ti eviti una fastidiosa scrollbar orizzontale mentre i div finiscono il loro giro corrente prima di adeguarsi alle nuove dimensioni).
Per quanto riguarda le proprietà fondamentali del corridore #imhappy anche qui il
position absolute e il
left su
0px.
Gli altri stili sono un abbellimento per rendere graficamente visibile l'elemento che si muove e dare un altezza alla rotaia (che altrimenti sarebbe di default a 0px e se scrivi delle cose dopo finiscono sotto il div che si muove), ma tu puoi dargli forma e dimensioni nella misura che più ritieni comode per i tuoi scopi.
Veniamo allo script in se, che ho scritto sottoforma di plugin jquery, per cui per cominciare salva quanto segue in un file .js ed includilo nella pagina subito dopo l'inclusione della libreria jquery:
Codice:
/*** .goAndBack()
*
* Il plugin serve a gestire il movimento di un elemento che fa avanti e indietro
* nella pagina all'interno di un preciso contenitore.
* Il presente script è stato scritto per la comunità di mrwebmaster.it
*
* @url http://forum.mrwebmaster.it/jquery/37930-movimento-continuo-jquery.html
* @author flameseeker
*/
(function($)
{
var settings;
$.fn.extend({
goAndBack: function() {
var runnerObj = this;
return {
runner: runnerObj,
settings: settings,
isStopped: false,
howToRun: function(obj) {
var self = this;
var pixelToRun = $(obj).parent().width()-$(obj).outerWidth();
var operation = $(obj).position()['left']==0? "+="+pixelToRun : "0";
$(obj).animate(
{left: operation},
this.settings.duration,
function() {
if (self.settings.callback != null)
self.settings.callback();
if (!self.isStopped)
self.howToRun(obj);
}
);
},
stop: function() {
this.isStopped = true;
},
run: function(options) {
this.settings = $.extend({
duration: 4000,
callback: null
}, options);
this.isStopped = false;
this.howToRun(this.runner);
}
};
}
});
})(jQuery);
E adesso veniamo al sodo, il suo utilizzo:
Codice:
var runner = $('#imhappy').goAndBack();
runner.run();
Praticamente il lancio del metodo implementato dal plugin prepara tutto il necessario in una varibile che usi come riferimento per l'oggetto che si muove.
Lanciando il metodo .run() da questa variabile il tuo oggetto inizia il suo ciclo di movimento infinito.
Puoi successivamente fermarlo chiamando il metodo .stop() in un qualsiasi momento (se il tuo script dovesse averne l'esigenza).
Chiamando .run() puoi anche decidere di passargli due parametri: uno riguarda la durata (che è la durata in cui deve essere eseguita l'animazione: più corto è il tempo più veloce risulta l'elemento e viceversa) e il secondo è una callback che viene richiamata ogni volta che il div raggiunge una delle due estremità della rotaia.
Un esempio al volo:
Codice:
var runner = $('#imhappy').goAndBack();
runner.run({duration: 2000});
Per concludere, ti lascio
un fiddle in cui dimostro il funzionamento dello script applicandolo a due elementi contemporaneamente e con differenti durate.