<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href = "login.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var swidth = $(window).width();
var sheight = $(window).height();
$(document).ready(function(){
$("#box").animate({
top: (sheight*0.22)+"px",
left: (swidth*0.25)+"px",
width:(swidth*0.3)-40+"px",
height: (sheight*0.35)-40+"px",
}, 2000, function(){
$('<input type="button" value="My button">').appendTo(this)
.button().click(function(){
alert('I was clicked!');
});
});
});
</script>
</head>
<body>
<header>
</header>
<section>
<div id="box">
</div>
</section>
</body>
</html>
「.animate.」の後にボタンを追加したので、それを望んでいました。アニメーションが終了するまで待機します。しかし、運がありません。
問題は、アニメーションの開始時に div が非常に小さいため、ボタンが div 内にほとんど収まらず、見栄えが悪いことです。したがって、アニメーションが完了し、divがフルサイズになった後にボタンを表示したいだけです。
事前にご回答いただきありがとうございます。