Errore con i tempi Javascript/Jquery nelle schede inattive

Ho recentemente assunto l'incarico di creare un'animazione in Javascript/jQuery. L'animazione consiste in un cerchio che si muove attorno alla mappa del tubo di Londra. Ogni volta che passa una stazione, il nome della stazione è sottolineato.Errore con i tempi Javascript/Jquery nelle schede inattive

Sto ancora lavorando per perfezionarlo e ho notato che quando la scheda è inattiva se incasina i tempi della sequenza quando si ritorna alla pagina. Perché lo sto incorporando in un iframe Non sembra funzionare quando uso $(window).focus() o $(window).blur().

Ho animato il cerchio usando la funzione jQuery animate e semplicemente ho reso l'opacità 0 su tutte le linee sotto il testo e ho messo dei ritardi su di esse per animare l'opacità a 100. Ho messo un link qui sotto per visualizzare l'animazione così com'è. Ancora problemi con l'animazione che attualmente sto modificando ma non sono sicuro di come risolvere il problema della scheda inattiva. Qualsiasi aiuto sarà grande.

withoutframe: http://www.gbutlercreative.co.uk/london/index.html

con telaio http://www.gbutlercreative.co.uk/london/frame.html

fonte

2013-05-06 Gary B

Giusto per chiarire, il valore massimo css opacity è 1 non 100. –

non so come potrebbe funzionare ma un'idea che avevo appena era invece di codificare i tempi di quando cambiare l'opacità, è possibile creare una funzione che gira ogni x secondi che commuta l'opacità dell'immagine più vicina? Quindi funzionerebbe indipendentemente dal tempo e sarebbero solo i passi dell'animazione che sarebbero stati codificati. Solo un'idea, potrebbe funzionare male a causa di quante immagini ci sono. – martincarlin87

Grazie. Vedo cosa intendi, ma il problema con questa animazione è che deve essere preciso al millisecondo. Ecco per avere un aspetto –

penso che si potrebbe usare la funzione animate di richiamata, ma dovrete ricodificare tutto la logica:

$(".icon") 
    .animate({left:'+=23px',top:'+=23px'},500,'linear',function(){$(".Chesham").animate({opacity:1},10);}) 
    .animate({left:'+=22px'},500,'linear',function(){$(".Chalfont").animate({opacity:1},10);})

Fai lo stesso per tutti.

fonte

2013-05-06 13:10:54

Capisco cosa intendi con arrosto. Sì, funzionerebbe. Se non ce n'è un'altra, potrei doverla rianimare in una funzione di callback animata, ma chiedendo se c'è una soluzione più semplice per la velocità dell'animazione quando inattiva. come mettere in pausa l'animazione quando non è attiva o il cerchio si muove a una velocità diversa quando la pagina è fuori fuoco. O anche costringendo la velocità a rimanere la stessa quando inattivo. Ho notato che sembra ok in safari ma non in altri browser. –

Ho notato questa soluzione per un problema simile. Mi stavo chiedendo se e come potrei implementarlo nel mio jQuery. Thankshttp: //stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome –

Errore con i tempi Javascript/Jquery nelle schede inattive

risposta

Problemi correlati