divをアニメーション化して中心から展開する

divを中心から水平方向および垂直方向に展開する単純なコードがありますが、左または下にのみ展開されます（左= 50ピクセル、右= 50ピクセル）または（上= 50ピクセル、下限= 50ピクセル）の合計を100ピクセルとします。ここコード：divをアニメーション化して中心から展開する

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

ありがとうございました。

出典

2011-07-13 vikenoshi

これは？

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を使用し、上にアニメーションを付けました。左：ボックスを上に、左に、下に、右にも値を戻します。

"Hello"をボックスの中央に置いておきたい場合は、余分なCSSを追加する必要があるかもしれません。

出典

2011-07-13 10:20:28 theguywholikeslinux

うわーそれはクールだ、これは私がそれをすべて望む！ありがとうございました、あなたは私の日を保存しました〜 – vikenoshi

@vike上下の矢印の横にあるチェックボタンを押すと、私の答えは「受け入れられました」とマークすることができ、皆さんは問題が解決され、 – theguywholikeslinux

divをアニメーション化して中心から展開する

答えて

関連する問題