jQuery Animer DIV en utilisant "position"

Je veux animer ceci:jQuery Animer DIV en utilisant "position"

$("#movethis").position({ my: "center top", at: "center bottom", of: "#nav1" });

Comment puis-je faire?

... C'est un peu bizarre, et je ne trouve aucun exemple.

/// udpate: a été corrigé. Entre eux préfèrent encore faire ce qui précède, mais ce que je suis:

unElement = sélectionne dynamiquement élément correct

theMoverPos = $("#theMover").position().left; 
goToPos = $(AnElement).position().left + ($(AnElement).width()/2); 
moveTo = goToPos - theMoverPos; 
moveTo2 = "+=" + moveTo; 
$("#theMover").animate({ left: moveTo2}, 1000);

Source

2010-10-28 Dave

BIG EDIT

Voici ce que je pense maintenant que vous essayez de faire :

Vous avez une navigation horizontale, et vous voulez animer un soulignement ou un autre style entre les éléments lorsque l'utilisateur clique sur une ancre.

Si c'est ce que vous cherchez, vous voulez jeter un œil au jQuery animate call.

Voici une page d'exemple que je fouetté qui est un peu plus simple que ce que vous avez fait (au lieu de + = pour l'animation, il définit une valeur absolue et ANIME entre les états):

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var startTop = $("#nav1").outerHeight() + $("#nav1").position().top; 
    var startLeft = $("#nav1").position().left; 
    $("#underline").attr("style","top: " + startTop + "px; left: " + startLeft + "px;"); 

    $(".navButton").click(function() { 
     var newPos = $(this).position().left; 
     $("#underline").animate({left: newPos},"slow"); 
    }); 
}); 
</script> 
<style type="text/css"> 
.navButton { 
    float: left; 
    clear: none; 
    margin-right: 10px; 
    cursor: pointer; 
} 
#underline { 
    height: 1px; 
    border: 1px solid red; 
    width: 30px; 
    position: absolute; 
} 
</style> 
</head> 
<body> 
<div class="navButton" id="nav1">nav 1</div> 
<div id="underline"></div> 
<div class="navButton" id="nav2">nav 2</div> 
<div class="navButton" id="nav3">nav 3</div> 
</body> 
</html>

Réglage l'attribut 'style' semble être nécessaire car si ce n'est pas le cas, la première animation viendra du coin supérieur gauche de l'écran. Cela peut être un bug jQuery, animate() semble animer entre les valeurs listées dans la feuille de style ou element.style et les nouveaux paramètres, plutôt qu'entre les styles calculés et les nouveaux paramètres. Définir element.style était la meilleure méthode que je pouvais trouver au lieu de coder en dur votre 'top' et 'left' pour le soulignement dans le CSS.

Source

2010-10-28 21:01:37 Benn

J'ai une navigation qui est généré dynamiquement (id = nav1, nav2, nav3, etc.) Et se dirige vers des ancres de page. Je veux une ligne (en dessous d'eux) pour animer entre ces liens pour montrer la page actuelle. J'ai toute la logistique élaborée accepter de faire glisser ce DIV (un soulignement) à ces endroits dynamiques. Si je pouvais utiliser le code ci-dessus (que j'ai utilisé pour initialiser la position) pour positionner ce serait super facile. Je ne sais pas comment animer une chose si étrange. – Dave

position d'utilisation: absolue; dans le style du soulignement (j'ai utilisé un div) et puis ma méthode ci-dessus fonctionne (moins un edit, voir ci-dessus). Cependant, vous devrez envelopper une méthode qui l'anime en haut de la pile une fois que vous aurez atteint le fond. – Benn

sonne comme si vous compliquiez les choses. pourriez-vous nous montrer l'exemple complet? – sunn0

Si cela peut code vous aide, je comprends ce que vous voulez,

var temp=$("#nav1").width(); 
var temp2=$("#movethis").width(); 
temp=50-((temp/temp2)*100); 
temp="+="+temp+"%"; 
$("#movethis").animate({ left: temp});

Source

2010-10-28 23:55:09 pahnin

jQuery Animer DIV en utilisant "position"

Répondre

Questions connexes