jQueryオブジェクト０6

jQuery 授業



汎用的なアニメーション - animate

  • 記述内容
$(function() {
$('#div1').animate({
'margin-top': '200',
'margin-left': '400',
});
});
  • 省略記述
$(function() {
$('#div1').animate({
top: 200,
left: 400,
});
});

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>汎用的なアニメーション - animate</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
body {
background-color: #F93;
position: relative;
}

#div1 {
position: absolute;
width: 50px;
height: 50px;
background-color: #F9F;
}
</style>
</head>
<body>

<div id="div1">box</div>

<script>
$(function() {
$('#div1').animate({
top: 200,
left: 400,
});
});
</script>
</body>
</html>


ブラウザで表示【 Chrome 】

  • [ padding ]による位置指定によるアニメーション