J'ai une division absolument positionnée à top: 0px et right: 0px , et je voudrais utiliser .animate() de jquery pour l'animer de sa position actuelle à left: 0px . Comment est-que quelqu'un peut faire ça? Je n'arrive pas à faire fonctionner cela:
$("#coolDiv").animate({"left":"0px"}, "slow");
Pourquoi cela ne fonctionne-t-il pas et comment accomplir ce que je cherche à faire?
Merci!!
Je pense que la raison pour laquelle cela ne fonctionne pas a quelque chose à voir avec le fait que vous avez l' right de la position, mais pas de l' left.
Si vous réglez manuellement l' left à la situation actuelle, il semble aller:
Live exemple: 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:
Semble que Firefox se comporte comme prévu en raison de ses calculé left poste est disponible à la valeur correcte en pixels, alors que les navigateurs basés sur Webkit, et apparemment, c'est à dire, de retour d'une valeur de auto pour la position de gauche.
Parce qu' auto n'est pas une position de départ pour une animation, l'animation s'exécute efficacement de 0 à 0. Pas très intéressant à regarder. :o)
Réglage de la position de gauche manuellement avant de l'animer comme ci-dessus résout le problème.
Si vous n'aimez pas encombrer le paysage avec des variables, voici une belle version de la même chose qui élimine la nécessité pour une variable:
$("#coolDiv").css('left', function(){ return $(this).offset().left; })
.animate({"left":"0px"}, "slow");
Voici une réponse minimale qui montre que votre exemple fonctionne:
<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 originale:
Vous avez:
$("#coolDiv").animate({"left":"0px", "slow");
Corrigée:
$("#coolDiv").animate({"left":"0px"}, "slow");
Documentation: http://api.jquery.com/animate/
donc la méthode .animate ne fonctionne que si vous avez donné un attribut position à un élément, sinon il n'a pas bougé?
par exemple, j'ai vu que si je déclare le div mais que 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 marge de propriété: xwyz;
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
