jQuery: анимация ширины / высоты, но центрирование - PullRequest
Новая
       2

jQuery: анимация ширины / высоты, но центрирование

7 голосов
/ 03 марта 2011

У меня есть элемент на странице, который я уже центрировал по горизонтали и вертикали (это модальный диалог пользовательского интерфейса jQuery), и хочу изменить его размер с помощью .animate (), например так: 

<div id="element" style="width: 100px; height: 100px;">
    Hi Stack Overflow!
</div>

<script type="text/javascript">
    $('#element').animate({ height: "200px" });
</script>

Это прекрасно работает, за исключением того, что элемент растет только вниз. Я пытаюсь сделать так, чтобы элемент рос вертикально в обоих направлениях (в данном случае 50 пикселей в каждом направлении), чтобы он оставался по центру. Есть ли способ, которым это можно сделать?

Ответы [ 2 ]

18 голосов
/ 03 марта 2011

Демонстрация в реальном времени 

var growEl = $("#grow"),
    curHeight = $("#grow").height(),
    curTop = growEl.offset().top,
    newHeight = 200,
    newMargin = curTop -(newHeight -curHeight)/2;

if(newMargin < 0){
 newMargin = 0;   
}

$("#grow").animate({height:newHeight+"px", marginTop:newMargin + 'px'});

Формула для определения того, что делать маржа 

NewTopMargin = CurrentMargin-(NewHeight-OldHeight)/2

Спасибо @bobsoap за напоминание мне использовать offset.top

0 голосов
/ 03 марта 2011 
margin-top: -50px, height: 50px;

Подобные вещи (извините, они не отформатированы), я уверен, что вы можете вставить их правильно.

...