[risolto] movimento continuo jquery

Fabio90

Utente Attivo
29 Feb 2012
507
0
16
Buonasera,
è possibile muovere un div da sinistra verso destra e viceversa in modo continuo?

Grazie
 

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
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

Utente Attivo
29 Feb 2012
507
0
16
Grazie del suggerimento

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

riusciresti ad aiutarmi per il rimanente? :)

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

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
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.
 
Ultima modifica:

Fabio90

Utente Attivo
29 Feb 2012
507
0
16
Non ho parole per ringraziarti!

semplicemente fantastico. Grazie mille!!
 
Discussioni simili
Autore Titolo Forum Risposte Data
L (risolto) MySQL 0
B getElementById su piu id(Risolto) Javascript 7
L Esercitarsi con Js [RISOLTO] Javascript 4
C [RISOLTO]Inserimento variabile php in input html PHP 20
L risolto visualizzazione e ordinamento dati PHP 1
moustache [RISOLTO] SQL PHP IIS PHP 8
Sergio Unia Ricezione email con destinatari multipli [Risolto] PHP 2
L update tabelle in php mysql [risolto] PHP 6
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
L [RISOLTO] Stampa a video risultato count in html PHP 13
L [RISOLTO] Eliminare una discussione creata PHP 3
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
A [PHP] Problema query insert [RISOLTO] PHP 14
B [PHP] recuperare IP dei server in load balancing [RISOLTO] PHP 3
K [RISOLTO] Problema Griglia Php+Mysql PHP 13
S [RISOLTO] aggiorna tabella da select option asp classic Classic ASP 7
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2
elpirata [RISOLTO][Mysql] Problema insert valori apostrofati MySQL 1
elpirata [RISOLTO][Mysql] Contare le occorrenze in un campo tipo varchar MySQL 2
G [MS Access] Gestione biglietti [RISOLTO] MS Access 2
G [MS Access] Casella combinata & Query [RISOLTO] MS Access 4
G [MS Access] Query mese corrente con conteggio [RISOLTO] MS Access 2
M [RISOLTO]Windows media player non mi funziona più su win 10 pro 64 bit Windows e Software 2
C [RISOLTO][PHP] Errore di sintassi PHP 8
IT9-Gpp [RISOLTO] Leggere variabile restituita da success Ajax 3
Kolop [RISOLTO][PHP] Problema Pagination PHP 2
C [RISOLTO][PHP] Funzione ONclick PHP 14
C [RISOLTO][PHP] Conteggio righe di una tabella PHP 4
N [PHP] Utilizzo variabili di sessione [Risolto] PHP 13
Tommy03 [RISOLTO][PHP] Webserver o devserver? PHP 2
Sergio Unia Recupero dati da una vecchia versione MySql [Risolto] MySQL 4
spider81man [PHP] Problemi cancellazione dato su DB [RISOLTO] PHP 1
A [RISOLTO]Inserimento Immagini da pc a MySql PHP 15
A [PHP] RISOLTO Invio Mail con Tabella PHP 2
felino Risolto - [Wordpress][WooCommerce] PayPal Checkout e campi di fatturazione WordPress 2
elpirata [PHP][RISOLTO] Sommare gli importi estratti da un ciclo while PHP 3
elpirata [PHP][RISOLTO] Effettuare la somma dei tempi di lavorazione PHP 3
elpirata [PHP] [RISOLTO]Sovrascrivere testo in una tabella PHP 2
A [RISOLTO]Recuperare dati inviati con json tramite php PHP 4
C [RISOLTO][PHP] Passaggio variabili senza refresh di pagina PHP 7
elpirata [PHP][RISOLTO] Errore di tipo Notice: Undefined index - Come risolvere quando si hanno tante var PHP 10
S Problema in PHP per invio file XML - RISOLTO- PHP 8
A [Javascript] [RISOLTO] Doppio "submit", in uno stesso "Form" , che puntino ad "action" diversi Javascript 1
marino51 [Risolto]videochat di messenger ha smesso di funzionare sul telefonino Smartphone e tablet 1
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
ken_korn [Javascript][Risolto] browser.tab.Tabs.favIconUrl non funziona Javascript 5
A [RISOLTO] HighChart e PHP PHP 4
A [RISOLTO] PHP Selezionare tutti i file con stessa estensione PHP 2
A [RISOLTO] Table elaborata da codice PHP con dati da DB non visualizzata in IFRAME PHP 15
T [Photoshop] Problema creazione pennello personalizzato [RISOLTO] Photoshop 3

Discussioni simili