Muovere div in posizione absolute

[francescocorr]

Salve a tutti,
sto usando lo script move.js per cercare di ricreare un effetto tipo distribuzione di carte. Il mio scopo è quello di creare un menù dinamicamente partendo da una posizione "A" e facendo una sorta di distribuzione verso "B", "C", "D".... "N".

Lo script a cui faccio riferimento è questo: move.js

Per fare ciò ho creato 5 div con posizioni assolute. Partendo dal primo con un ciclo recupero le posizioni b c d ecc e da li faccio partire una animazione.

Diciamo che più o meno funziona, il problema è che l'effetto non è quello voluto. Nel senso vorrei partire con una immagine x che poi arrivata in posizione si trasformi in uno sfondo con una sctitta y. Dopo questo vorrei che l'effetto ricominciasse sempre da a ed andasse verso C e così via.
Adesso invece mi fa una sorta di effetto di ritorno va da A-->B poi torna un'altra volta ad a. questo non vorrei succedesse.

Il codice che utlizzo è il seguente.

CSS:

#a{
	position absolute;
	top:270px;
	left:350px;
}
#carte1{
	position absolute;
	top:350px;
	left:150px;

}
#carte2{
	position absolute;
	top:350px;
	left:350px;

}
#carte3{
	position absolute;
	top:350px;
	left:550px;

}

JS:

for(i=1;i<div.length;i++){
	var position = $('#carte'+i).position();
     $("#a")
            .append("[img]images/image.png[/img]")
            .attr('class', '')
            .attr('position','absolute')
            .attr('top', '273px')
            .attr('left', '355px')
            .delay('1.5s')
            .animate({ top: position.top, left:position.left }
            .attr('class', 'hidden')
     );
}

Uso un ciclo in quanto il menù è dinamico e non conosco la dimensione.

Per evitare il problema avevo creato una classe hidden che finita l'animazione nascondeva il div e ricreava la posizione ma non va bene.

Qualche suggerimento su come posso affrontare la problematica?
Grazie

[cavicchiandrea]

Non so darti suggerimenti, ma ti segnalo che lo script nove.js funziona male (alcuni movimenti sono a scatti) o non funziona proprio su IE 9, valuta se il caso di proseguire comunque

[francescocorr]

cavicchiandrea grazie per la dritta su move.js.

Qualcuno ha qualche idea su come posso fare questa cosa? Qualche esempio o guida per poter leggere qualcosa?

Grazie
Frank

[francescocorr]

Ok ho fatto qualche prova con animate e potrebbe fare al caso mio.

Purtroppo però non riesco a far partire l'animazione dal div content.
Vi posto il codice:

CSS

#content {
    background:#c2c2c2;
    position:absolute;
    width:40px;
    height:60px;
    padding:3px;
    margin-top:5px;
    left: 100px;
}

#content1 {
    position:absolute;
    left: 150px;
    top:300px;
}


#content2 {
    position:absolute;
    left: 200px;
    top:300px;
}


#content3 {
    position:absolute;
    left: 250px;
    top:300px;
}

Qui ho creato 3 div con posizione assoluta. voglio che il movimento parta sempre dal div content e vada poi verso il content1 content2 content3 ecc ecc.


JS:

<input type="button" id="vai" value="Vai"/>
<div id="content">Muovi</div>
<div id="content1">  </div>
<div id="content2"> </div>
<div id="content3"> </div>

<script type="text/javascript">
	
	$("#vai").click(function() {
	
		for(i=1;i<4;i++){
		    var x = $("#content"+i).position().top;
    		var y = $("#content"+i).position().left;	

     		$("#content").animate(
            	{"top": "+="+y+"px", "left": "+="+x+"px"},
            	"slow", function(){
                $(this).html("[img]image.jpg[/img]");
            });
		}
	});

</script>

Con il codice js prelevo la posizione dell'iesimo div e gli dico crea l'animazione. Purtroppo non riesco a capire come far partire l'animazione dal div content per ogni ciclo

Qualche suggerimento?
Grazie
Frank

[cavicchiandrea]

Se posizioni i vari content1/2/3 con left è normale usa margin-left

[francescocorr]

Scusami Andrea,
non so se non ho capito bene o non ho spiegato bene il mio intento.

Ho una posizione A con un contenuto ad esempio una sccritta.

Voglio che questa scritta contenuta nel div a si sposti verso la posizione B.
Dopo che si è spostata, viene completato l'effetto quindi si riparte con il movimento A si sposta in C e così via. E' come se fosse un tavolo di carte dove c'è il mazziere al centro e dal centro vengono distribuite le carte verso i lati.

Ho provato a mettere i margin-left sia nella dichiarazione css che nel js ma non è questo l'effetto.

Penso che arrivati al div di destinazione si deve resettare la funzione facendola ripartire ma sinceramente non ho idea di come fare

Grazie per gli aiuti
F