анимировать div и расширить от центра

У меня есть простой код, который расширяет div по горизонтали и вертикали от центра, но он расширяется только влево или вниз, я хочу, чтобы он расширялся в обе стороны (слева = 50 пикселей, справа = 50 пикселей) или (сверху = 50 пикселей, снизу =50px) от центра с общим значением 100px. вот код:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
    background-color:#bca;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid green;
    padding:10px;
}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block">Hello!</div>
<script>


$("#go").click(function(){
  $("#block").animate({
    width: "100px",
    height: "100px",
    opacity: 0.6,
  }, 1500 );
});
</script>

</body>

Thank you.


animation css center expand
person vikenoshi    schedule 13.07.2011    source источник

Ответы (1)


arrow_upward
16
arrow_downward

Как это?

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <button id="go">&raquo; Run</button>
    <div id="block">Hello!</div>
</body>

CSS

div {
    background-color:#bca;
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: 50%;
    margin-top: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid green;
    padding:10px;
}

JQuery

$("#go").click(function(){
    $("#block").animate({
        width: "100px",
        height: "100px",
        top: "-50px",
        left: "-50px",
        opacity: 0.6,
    }, 1500 );
});

http://jsfiddle.net/theguywholikeslinux/87f4Y/

Я использовал margin-left и margin-top для центрирования и анимировал значения top: и left:, чтобы поле увеличивалось вверх и влево, а также вниз и вправо.

Возможно, вам придется добавить дополнительный CSS, если вы хотите, чтобы «Hello» также оставалось в центре поля.

person angrydust    schedule 13.07.2011
comment
Вау круто, это все, что я хочу! Спасибо, вы спасли мой день~ - person vikenoshi; 13.07.2011
comment
@vike, если вы нажмете кнопку с галочкой рядом со стрелками вверх и вниз, вы можете отметить мой ответ как «принятый», и все узнают, что ваша проблема решена и каково было решение. - person angrydust; 13.07.2011