[risolto] movimento continuo jquery

[Fabio90]

Buonasera,
è possibile muovere un div da sinistra verso destra e viceversa in modo continuo?

Grazie

 

[flameseeker]

Certo, dovresti riuscire a realizzarlo col metodo .animate().
Ti suggerisco di creare un div che sia largo come la pagina, in questo modo ti puoi calcolare in base alla sua larghezza la quantità di movimento che deve compiere il tuo oggetto.

Alla fine dell'animazione puoi far intervenire una callback che faccia il calcolo opposto e riporti quindi il div indietro, realizzando così un loop infinito (sfruttando la callback alla fine dell'animazione che lo riporta indietro) che gli farà fare il movimento in modo continuo.

 

[Fabio90]

Grazie del suggerimento

nel frattempo sono riuscito a fare questa porzione di codice..

riusciresti ad aiutarmi per il rimanente?

$( "#logo" ).animate({
marginLeft: '25px'
}, 3000, function() {
// Animation complete.
});

 

[flameseeker]

Ciao ti ho scritto un piccolo plugin jquery per poter gestire la situazione.
Parto dal markup:

<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:

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

/*** .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:

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:

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.

 

[Fabio90]

Non ho parole per ringraziarti!

semplicemente fantastico. Grazie mille!!