Div animation verso destra e ritorno.

**joint77** · 02-03-2013, 20:04

Ciao a tutti, premetto come da titolo che sono un neofita riguardo a questo potente linguaggio web è vorrei chiedere se è possibile un aiuto.

Vorrei tramite jQuery dato un div di dimensioni fisse al primo click che si spostasse di tot pixel verso destra, mentre al secondo click tornasse al punto di partenza.

Mentre ho capito come farlo spostare animando verso destra, mi è oscuro il metodo per farlo tornare al punto di partenza.

Posto di seguito il codice:

codice:

<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style>
#nav{position: relative;left: -250px;width: 300px;height:500px;background: #333;}
</style>
<script type='text/javascript'>
$(function(){$("#nav").on("click", function(){$('#nav').animate({left: 200}, 1000);
});
});
</script>
</head>
<body>
<div id="nav"></div>
</body>
</html>

Grazie

**rinaldi** · 03-03-2013, 11:46

codice:

  $(document).ready(function()
 { 	 $('#nav').animate({left: 200}, 1000);	
          $('#nav').animate({left:0}, 1000);	      });

**joint77** · 03-03-2013, 12:07

Grazie ma così è un'animazione continua, io vorrei che si spostasse a destra con il primo click e a sinistra, al punto di partenza ad un click successivo.

Grazie comunque

**rinaldi** · 03-03-2013, 12:14

codice:

 <script type='text/javascript'>  


 function destra() {$('#nav').animate({left: 200}, 1000); }
  function sinistra() {$('#nav').animate({left: 0}, 1000); } 
</script>

codice:

<div> <button onClick="destra()">destra</button>  <button onClick="sinistra()">sinistra</button></div>

**joint77** · 03-03-2013, 12:35

Grazie ancora, ma questo riesco a farlo (utilizzando 2 link differenti per destra e sinista), il mio problema è cliccare sul div #nav e far si che al primo click vada a destra e al secondo torni al suo posto.

forse mi sono spiegato male nel primno post, scusa

**rinaldi** · 03-03-2013, 12:43

Sforzati un poco è facile crea una condizione del valore della posizione

**joint77** · 03-03-2013, 13:15

La cosa che non capisco e come dare un valore al primo click e uno al secondo, ho provato anche ad impostare una variabile che andasse a prendere il valore css del left e fare un controllo se negativo o positivo ma senza risultato, il ciclo non viene fatto...

**rinaldi** · 03-03-2013, 13:44

Codice javascript

codice:

<script type='text/javascript'>



 function posizione()
{ 

// valore posizione
 var p= document.getElementById('nav').style.left; 
  //alert( p);
  // condizione
  if ( p == "-250px")
  {destra()}
  else
  {sinistra()}
  
  
}


//$(document).ready(function() {
	
//$('#nav').animate({left: 200}, 1000);	
//$('#nav').animate({left:0}, 1000);	
    
//});
function destra()
{$('#nav').animate({left:0}, 1000); }

function sinistra()
{$('#nav').animate({left: -250}, 1000); }
</script>

Ciodice div metti queste propietà nello style

codice:

<div id="nav"
 style="position: relative;left: -250px;width: 300px;height:500px;background: #333;" 
onClick="posizione()" ></div>

**joint77** · 03-03-2013, 14:01

Grande, non capisco una cosa però, se metto le regole css nella header il primo click va a vuoto, questo perchè non riesce a leggere il left dell'elemento?

**rinaldi** · 03-03-2013, 14:12

Originariamente inviato da joint77
Grande, non capisco una cosa però, se metto le regole css nella header il primo click va a vuoto, questo perchè non riesce a leggere il left dell'elemento?

si

Discussione: Div animation verso destra e ritorno.

Strumenti discussione

Ricerca discussione

Visualizza

Div animation verso destra e ritorno.

Permessi di invio