[Jquery]Background position su asse Y e animate

[idronestudy]

Utilizzando la tecnica Sprite ho la necessita di modificare il Background position lungo l'asse Y in maniera sequenziale in base a determinati valori...
il problema è che non posso dividere il background position in X e Y perché non tutti i browser accettano questa suddivisione ma hanno un unico valore background-position (xx yy).
Questo è il codice che utilizzo attualmente ma mi riesce a generare l'animazione solo sull'asse x (e per una parte sull'asse y)...

for(x = 0; x < centinaia; x++) 
   	{ 
	$("#box1").animate({
    "backgroundPosition" : "+=20px"},
	"slow", //animazione lenta
	"linear");
		};

[simo_JQ]

effettivamente è un problema...
L'unica cosa che m viene da consigliarti è quella di non utilizzare "+=20" ma estrapolare il parametro css background-position formattarlo in modo da estrarre solo la coordinata che ti interessa mettere tutto in una variabile e sommare 20 alla variabile e poi al posto di "+=20" mettere semplicemente la tua variabile... calcolandola ogni volta all'interno del ciclo dovrebbe fare circa la stessa cosa che fa +=20...

for(x = 0; x < centinaia; x++) 
   	{
        var bpos = $("#box1").css("background-position");
        var end = bpos.indexOf(" ")-2;
        var x = parseFloat(bpos.substring(0, end))+20; // qui al posto di 20 va messo lo scartamento che ti serve.
	$("#box1").animate({
           "backgroundPosition" : x+"px 0px"}, // nn so se la sintassi sia questa oppure (xx, yy - veditela tu)
	   "slow", //animazione lenta
	   "linear");
		};

PROVA, se va bene se non va... xD chiedo perdono per la mia inezia.

PS non sono così sicuro che pero animate funziona con backgroundPosition...

[idronestudy]

Animate funziona con backgroundPosition perché con lo stesso codice scritto da me e un'immagine sprite con un unico movimento lungo l'asse X funziona.

Purtroppo lo script che mi hai dato non funziona...e credo che si trovi nel fatto che animate non accetta questa sintassi "backgroundPosition" : x+"px 0px"...
mumble mumble...

[simo_JQ]

strano. La sintassi dovrebbe essere quella...

Altrimenti prova:

for(x = 0; x < centinaia; x++) 
   	{
	$("#box1").animate({
           "backgroundPosition" : (+20px 0)}
	   "slow", 
	   "linear");
};

...oppure

for(x = 0; x < centinaia; x++) 
   	{
	$("#box1").animate({
           "backgroundPosition" : (+20 0)}
	   "slow", 
	   "linear");
};

[idronestudy]

Entrambe mi danno errore di sintassi direttamente in Dreamweaver...
sostituendo invece a .animate .css funziona ma ovviamente perdo l'animazione...

[simo_JQ]

for(x = 0; x < centinaia; x++) 
   	{
        var bpos = $("#box1").css("background-position");
        var end = bpos.indexOf(" ")-2;
        var pos_x = parseFloat(bpos.substring(0, end))+20; // qui al posto di 20 va messo lo scartamento che ti serve.
	$("#box1").animate({
           "backgroundPosition" : "("+pos_x+"px 0px )"}, // nn so se la sintassi sia questa oppure (xx, yy - veditela tu)
	   "slow", //animazione lenta
	   "linear");
		};

Prova così...
altrimenti non so come si possa fare...


aH una cosa importante questo codice serve per avere uno SLIDE sull'asse delle x... a te serve su quale asse??

[idronestudy]

serve sull'asse Y però i casi che mi hai dato (tranne i due con sintassi errata) li ho testati sia con la X che nella versione Y...
cmq neanche questa va...

[simo_JQ]

maledizione.


facciamo così, ora non ho tempo di testare gli script... appena ho tempo ci riprovo...
intanto sarebbe utile capire cosa ci devi fare con questa animazione magari esistono altri modi.

[idronestudy]

Un tabellone come quelli che c'erano una volta nelle stazioni per indicare i treni...una volta caricata la pagina inizierebbero a girare fino ad arrivare alla lettera o numero desiderato...
mi serviva l'animazione proprio per dare l'effetto che gira...

[idronestudy]

Per ora ho risolto creando un contenitore...e facendo variare il paramentro margin-top del contenitore interno...purtroppo pero si perde la sequenzialità dell'immagine perché quando termina il contenitore interno termina anche l'immagine...e soprattutto pesa un po di piu...