JQuery анимировать DIV, используя «положение» - PullRequest
Новая
       25

JQuery анимировать DIV, используя «положение»

2 голосов
/ 29 октября 2010

Я хочу оживить это: 

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

Как мне это сделать?

... Это что-то странное, и я не могу найти примеров.

/// udpate: нашел способ обойти.Все равно предпочел бы сделать выше, но вот что я получил:

AnElement = динамически выбирает правильный элемент 

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

Ответы [ 2 ]

2 голосов
/ 29 октября 2010

БОЛЬШОЕ РЕДАКТИРОВАНИЕ

Вот что я сейчас думаю, вы пытаетесь сделать:

у вас есть горизонтальная навигация, и вы хотите анимироватьПодчеркивание или другой смысл между элементами, когда пользователь нажимает на якорь.

Если это то, что вы ищете, вы можете проверить вызов jQuery animate .

Вот пример страницы, которую я развернул, которая немного проще, чем вы сделали (вместо + = для анимации она устанавливает абсолютное значение и анимирует между состояниями): 

<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>

Установка атрибута 'style' вручную представляется необходимой, поскольку, если он не установлен, первая анимация будет отображаться в левом верхнем углу экрана.Это может быть ошибка jQuery, кажется, что animate () анимирует между значениями, перечисленными в таблице стилей или element.style, и новыми параметрами, а не между вычисленными стилями и новыми параметрами.Установка element.style была лучшим способом, который я мог придумать, вместо того, чтобы жестко кодировать ваши 'top' и 'left' для подчеркивания в CSS.

0 голосов
/ 29 октября 2010

Если этот код может помочь вам, я понял, что вы хотите, 

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