web-dev-qa-db-fra.com

utiliser jQuery .animate pour animer une div de droite à gauche?

J'ai un div positionné absolument sur top: 0px Et right: 0px, Et j'aimerais utiliser la fonction .animate() de jquery pour l'animer de sa position actuelle à left: 0px. Comment est-que quelqu'un peut faire ça? Je n'arrive pas à obtenir que cela fonctionne:

$("#coolDiv").animate({"left":"0px"}, "slow");

Pourquoi cela ne fonctionne-t-il pas et comment peut-on accomplir ce que je cherche à faire?

Merci!!

jqueryjquery-animate
42
Alex

Je pense que la raison pour laquelle cela ne fonctionne pas a quelque chose à voir avec le fait que vous avez la position right mais pas la left.

Si vous définissez manuellement left sur la position actuelle, il semble que:

Exemple en direct: 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 si Firefox se comportait comme prévu parce que sa position calculée left est disponible avec la valeur correcte en pixels, alors que les navigateurs Webkit, et apparemment IE, renvoient une valeur de auto pour la position gauche.

Comme auto n'est pas une position de départ pour une animation, celle-ci va de 0 à 0. Ce n'est pas très intéressant à regarder. : o)

Définir la position gauche manuellement avant l'animation comme ci-dessus résout le problème.

Si vous n'aimez pas encombrer le paysage de variables, voici une version agréable de la même chose, qui évite d'avoir à utiliser une variable:

$("#coolDiv").css('left', function(){ return $(this).offset().left; })
             .animate({"left":"0px"}, "slow");    ​
50
user113716

Cela a fonctionné pour moi

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
6
Abhishek Goel

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:

Tu as:

$("#coolDiv").animate({"left":"0px", "slow");

Corrigée:

$("#coolDiv").animate({"left":"0px"}, "slow");

Documentation: http://api.jquery.com/animate/

5
artlung

Si vous connaissez la largeur de l'élément enfant que vous animez, vous pouvez également utiliser et animer un décalage de marge. Par exemple, cela animera de gauche à droite: 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 );
1
freeworlder

la méthode .animate ne fonctionne donc que si vous avez attribué un attribut de position à un élément, sinon il ne s'est pas déplacé?

par exemple, j'ai vu que si je déclare la 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 une propriété margin: x w y z;

1
Alessandro Violante