webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

.animate(); 1

  • ボタンをクリックしたら、表示してある width: 100px、height: 100pxの正方形が1,000px 移動して止まるように記述する。duration=600ms

f:id:ohta-felica:20160530001137p:plain

f:id:ohta-felica:20160530001445p:plain

html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Q2</title>
<style>
.box{
width: 100px;
height: 100px;
background: #777;
line-height: 100px;
text-align: center;
color: white;
}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
$('button').on('click', function(){
$('.box').animate({'marginLeft':'1000px'}, '600')
});
});
</script>
</head>

<body>
<p><button>button</button></p>
<div class="box">box</div>
</body>
</html>