J'ai un div absolument positionné à top: 0px et right: 0px, et je voudrais utiliser jquery's .animate() pour l'animer de sa position actuelle à left: 0px. Comment est-que quelqu'un peut faire ça? Je ne peux pas sembler obtenir ce travail:en utilisant jQuery .animate pour animer un div de droite à gauche?
$("#coolDiv").animate({"left":"0px"}, "slow");
Pourquoi pas ce travail et comment peut-on accomplir ce que je cherche à faire?
Merci!
Je pense que la raison pour laquelle il ne fonctionne pas a quelque chose à voir avec le fait que vous avez l'ensemble de position right, mais pas le left.
Si vous définissez manuellement la left à la position actuelle, il semble aller:
Un exemple concret: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:
Apparaît comme bien que Firefox se comporte comme prévu parce que son calcul La position left ed est disponible en tant que valeur correcte en pixels, alors que les navigateurs basés sur Webkit, et apparemment IE, renvoient une valeur de auto pour la position gauche.
Parce que auto n'est pas une position de départ pour une animation, l'animation fonctionne effectivement de 0 à 0. Pas très intéressant à regarder. : o)
La définition de la position gauche manuellement avant l'animation comme ci-dessus résout le problème.
Si vous ne l'aimez pas encombrer le paysage avec des variables, voici une belle version de la même chose que évite la nécessité d'une variable:
$("#coolDiv").css('left', function(){ return $(this).offset().left; })
.animate({"left":"0px"}, "slow");
est ici une réponse minimale qui montre votre exemple de travail:
<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>
Réponse d'origine:
Vous avez:
$("#coolDiv").animate({"left":"0px", "slow");
Correction:
$("#coolDiv").animate({"left":"0px"}, "slow");
Documentation: http://api.jquery.com/animate/
Mes sincères excuses, mais c'était une simple erreur de copier/coller, pas le problème. – Alex
Animer la position «droite» ... alternative valide. : o) – user113716
si la méthode ne fonctionne que si .animate vous avez donné un attribut de position à un élément, sinon il n'a pas bougé?Par exemple j'ai vu que si je déclare le div mais je ne déclare rien dans le CSS, il n'assume pas sa position par défaut et ne le déplace pas dans la page, même si je déclare la propriété margin: x w y z;
Cela a fonctionné pour moi
$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
Si vous connaissez la largeur de l'élément enfant que vous animez, vous pouvez utiliser et animer une marge de décalage aussi bien. Par exemple, cela l'animation de gauche: 0 à droite: 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);
Dans ma lecture de la source jQuery http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js, pour la détermination de la position jQuery normalise déjà la position d'un élément à "top" et " "parent" gauche sous le capot "- Je crois que votre réponse est incorrecte. Par exemple, mon exemple fonctionne malgré la valeur css définie pour right et la valeur animée définie sur left. – artlung
@artlung - Merci pour le lien, mais dans quel navigateur avez-vous testé? Je suis en train de tester dans Safari, et l'animation ne fonctionne pas sans régler la position de gauche. Il saute directement à gauche, vraisemblablement en raison de la valeur initiale de '' auto'. – user113716
Testé dans Firefox et a bien fonctionné. Particulier, Chrome et Safari se comportent comme vous l'avez indiqué. Donc ça fait le/changer/à la position correcte, mais ça ne montre pas le fx intérimaire! L'ajout de jQueryUI (qui permet supposément d'animer des choses supplémentaires normales que jQuery ne peut pas faire) n'apporte aucun changement pour Chrome et Safari. – artlung