Visualizzazione dei risultati da 1 a 2 su 2

Discussione: jquery ricorsione

  1. #1

    jquery ricorsione

    Buongiorno a tutti. Sto cercando di realizzare una piccola animazione in jquery.
    Ci sono 4 immagini e a turno si ingrandisce l'immagine 1, se rimpicciolisce la 1 e si ingrandisce la 2 ... si rimpicciolisce la 4 e si ingrandisce la 1 e così via...
    Per fare ciò ho creato una funzione ricorsiva e arrivati alla 4 immagine, la funzione richiama se stessa e ricomincia da capo.
    Fin qui tutto ok. Per i ridimensionamenti ho usato la funzione
    codice:
    setTimeout(function(){$('#img1').children('a').children('img').animate({ height: '100', left: '0', top: '0', width: '140'}, 100)},4000);
    			 		setTimeout(function(){$('#img1').children('a').children('img').animate({ height: '90', left: '0', top: '0', width: '126'}, 100)},8000)
    Ora c'è un'aggiunta. Ho bisogno che, se l'utente fa il mouse over su un'immagine, la procedura venga stoppata, e quando fa il mouseout ricominci, ma dall'immagine succissiva a quella del mouseover.
    Come posso fare?

  2. #2
    Ah ho provato ad utilizzare anche dei semafori, ovvero delle variabili che settavo a 1 quando facevo il mouseover e a 0 al mouse out. Se la funzione ricorsiva mi ritrovava il semaforo a 1 non richiamava se stessa. Peccato che nella fase di timeout non viene eseguito niente, tantomeno un controllo del semaforo, quindi così funziona solo a fortuna, cioè se il mouseover e mouseout si eseguano in un momento non di timeout.
    Il semaforo è la variabile over
    codice:
    var over=0;
    function rounder(pos){
    			 var tro=0;
    			 if (over==0 && tro==0){
    			 	if (pos==1){
    					setTimeout(function(){$('#img1').children('a').children('img').animate({ height: '100', left: '0', top: '0', width: '140'}, 100)},4000);
    			 		setTimeout(function(){$('#img1').children('a').children('img').animate({ height: '90', left: '0', top: '0', width: '126'}, 100)},8000);
    				}
    			 }else{
    			 tro=1;
    			 }
    			 if (over==0 && tro==0){
    			 	if (pos<=2){	 
    			 		setTimeout(function(){$('#img2').children('a').children('img').animate({ height: '72', left: '0', top: '0', width: '129'}, 100)},8000);
    			 		setTimeout(function(){$('#img2').children('a').children('img').animate({ height: '65', left: '0', top: '0', width: '116'}, 100)},12000);
    				}
    			 }else{
    			 tro=1;
    			 }
    			 if (over==0 && tro==0){
    			 	if (pos<=3){	
    					setTimeout(function(){$('#img3').children('a').children('img').animate({ height: '75', left: '0', top: '0', width: '108'}, 100)},12000);
    			 		setTimeout(function(){$('#img3').children('a').children('img').animate({ height: '67', left: '0', top: '0', width: '97'}, 100)},16000);
    				}
    			 }else{
    			 tro=1;
    			 }
    			 if (over==0 && tro==0){
    			 	if (pos<=4){	
    					setTimeout(function(){$('#img4').children('a').children('img').animate({ height: '75', left: '0', top: '0', width: '108'}, 100)},16000);
    			 		setTimeout(function(){$('#img4').children('a').children('img').animate({ height: '68', left: '0', top: '0', width: '97'}, 100)},20000);
    				}
    			 }else{
    			 tro=1;
    			 }
    			 if (over==0 && tro==0){
    			 setTimeout(function(){rounder(1);},20000);
    			 }
    		};

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.