メソッド　その5

jQuery

slideUp()メソッド
・縦にスライドしながら要素をたたむ
・パラメータが空の場合、400ミリ秒を指定するのと同じ
HTML

<style>
#list{
  background:#cef3ab;
  width:500px;
}
</style>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
	$('#list').slideUp(5000);
});
</script>
</body>

↓



slideDown()メソッド
・縦にスライドしながら要素を開く
HTML

<style>
#list{
  background:#cef3ab;
  width:500px;
  display:none;
}
</style>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
	$('#list').slideDown(5000);
});
</script>
</body>

↓



animate()メソッド
・CSSのプロパティを指定してアニメーションを作る
・animate ({ 'プロパティ': '値' })
・値を数値（px、em、%）で指定できるものに限ります
※animate ({ 'プロパティ': '値' }, 'スピード')でスピードも指定できる

<style>
#list{
  background:#cef3ab;
  width:500px;
  display:none;
}
</style>
</head>
<body>
<p id="photo">
<img src="../../img/natsu.jpg" width="1024" height="768" alt="夏の風景"></p>
<script>
$(function(){
	$('#photo').animate({
		'margin-left':'1000px'
	},5000);
});
</script>
</body>

↓