jQueryオブジェクト０5

jQuery 授業



スライドアニメーション - slideDown/slideUp



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライドアニメーション - slideDown/slideUp</title>

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

<style>
body {
background-color: #F93;
}
	
#div1 {
width: 300px;
height: 300px;
background-color: #F9F;
}

#div2 {		
position:absolute;
top: 320px;
left: 10px;
width: 300px;
height: 300px;
background-color: #6CF;
}
</style>
</head>
<body>

<div class="container">
<div id="div1">slideDown example.</div>
<div id="div2">slideOut example.</div>
</div>

<script>
$(function() {
$('#div1').hide();	
$('#div1').slideDown('slow');
$('#div2').slideUp('slow');
});
</script>
</body>
</html>

ブラウザで表示【 Chrome 】

  • 読み込まれると[ slideDown ],[ slideUp ]が開始される