Ho un div posizionato assolutamente a top: 0px e right: 0px, e vorrei usare jquery .animate() per animarlo dalla sua posizione attuale a left: 0px. Come si fa a fare questo? Io non riesco a farlo funzionare:utilizzando jQuery .animate per animare un div da destra a sinistra?
$("#coolDiv").animate({"left":"0px"}, "slow");
Perché non questo lavoro e come si fa a realizzare quello che sto cercando di fare?
Grazie !!
Penso che il motivo per cui non funziona ha qualcosa a che fare con il fatto che si ha il set right posizione, ma non il left.
Se si imposta manualmente la left alla posizione corrente, sembra andare:
esempio dal vivo:http://jsfiddle.net/XqqtN/
var left = $('#coolDiv').offset().left; // Get the calculated left position
$("#coolDiv").css({left:left}) // Set the left to its calculated position
.animate({"left":"0px"}, "slow");
EDIT:
appare come sebbene Firefox si comporti come previsto perché è calcolato la posizione left è disponibile come valore corretto in pixel, mentre i browser basati su Webkit, e apparentemente IE, restituiscono un valore di auto per la posizione sinistra.
Poiché auto non è una posizione di partenza per un'animazione, l'animazione viene eseguita in modo efficace da 0 a 0. Non molto interessante da guardare. : o)
Impostazione manuale della posizione sinistra prima che l'animazione come sopra risolva il problema.
Se non ti piace ingombrare il paesaggio con le variabili, ecco una bella versione della stessa cosa che evita la necessità di una variabile:
$("#coolDiv").css('left', function(){ return $(this).offset().left; })
.animate({"left":"0px"}, "slow");
Ecco una risposta minima che mostra il tuo esempio di lavoro:
<html>
<head>
<title>hello.world.animate()</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
<style type="text/css">
#coolDiv {
position: absolute;
top: 0;
right: 0;
width: 200px;
background-color: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// this way works fine for Firefox, but
// Chrome and Safari can't do it.
$("#coolDiv").animate({'left':0}, "slow");
// So basically if you *start* with a right position
// then stick to animating to another right position
// to do that, get the window width minus the width of your div:
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow');
// sorry that's so ugly!
});
</script>
</head>
<body>
<div style="" id="coolDiv">HELLO</div>
</body>
</html>
risposta originale:
Hai:
$("#coolDiv").animate({"left":"0px", "slow");
corresse:
$("#coolDiv").animate({"left":"0px"}, "slow");
Documentazione: http://api.jquery.com/animate/
mie scuse sincere, ma che è stato un semplice errore di copia/incolla, non il problema. – Alex
Animazione della posizione 'right' ... valida alternativa. : o) – user113716
modo che il metodo funziona solo se .animate hai assegnato un attributo di posizione a un elemento, se non non si è mosso?
ad esempio ho visto che se dichiaro il div ma non dichiaro nulla nel css, non assume la sua posizione di default e non lo sposta nella pagina, anche se dichiaro il margine di proprietà: x w y z;
questo ha lavorato per me
$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
Se si conosce la larghezza dell'elemento bambino si sta animando, è possibile utilizzare e animare un offset pure margine. Ad esempio, questo animerà da sinistra: 0 a destra: 0
CSS:
.parent{
width:100%;
position:relative;
}
#itemToMove{
position:absolute;
width:150px;
right:100%;
margin-right:-150px;
}
Javascript:
$("#itemToMove").animate({
"margin-right": "0",
"right": "0"
}, 1000);
Nella mia lettura della fonte jQuery http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js, per la determinazione della posizione jQuery normalizza già una posizione di elementi su "top" e " lasciato "relativo" sotto il cofano "- Credo che la tua risposta non sia corretta. Ad esempio, il mio esempio funziona nonostante il valore css sia impostato a destra e il valore animato sia impostato a sinistra. – artlung
@artlung - Grazie per il link, ma in quale browser hai testato? Sto testando su Safari e l'animazione non funziona senza impostare la posizione a sinistra. Salta direttamente a sinistra, presumibilmente a causa del valore iniziale di left "auto". – user113716
Testato su Firefox e funzionato alla grande. Peculiar, Chrome e Safari si comportano come hai indicato. Quindi sta facendo il/change/alla posizione corretta, ma non mostra l'interim fx! L'aggiunta di jQueryUI (che presumibilmente consente l'animazione di cose aggiuntive normali che jQuery non può) non modifica per Chrome e Safari. – artlung