jQuery slideUpとslideDownとslideToggle
jQuery slideUp
slideUpはスライドをアップします。
要素が上に上がっていき非表示になります。
サンプル
$(“セレクタ”).slideUp()
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“img”).slideUp()
});
</script>
<title>
</title>
</head>
<body>
<div>
<img src=”leaf.jpg” width=”480″ height=”640″ alt=”葉っぱ”>
</div>
</body>
</html>
画像が下から上にスライドし非表示になります。
jQuery slideDown
slideDownはスライドをダウンします。
非表示の要素が下に下がっていき表示になります。
サンプル
$(“セレクタ”).slideDown()
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“img”).css(“display”,”none”)
$(“img”).slideDown()
});
</script>
<title>
</title>
</head>
<body>
<div>
<img src=”leaf.jpg” width=”480″ height=”640″ alt=”葉っぱ”>
</div>
</body>
</html>
非表示の要素が下へスライドして完全に表示されます。
jQuery slideToggle
slideDownはスライドをアップとダウン切り替えながら実行します。
サンプル
$(“セレクタ”).slideToggle()
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(function(){
$(“.botton”).click(function(){
$(“img”).slideToggle()
});
});
</script>
<title>
</title>
</head>
<body>
<div>
<input type=”button” value=”botton” class= “botton” >
<img src=”leaf.jpg” width=”480″ height=”640″ alt=”葉っぱ”>
</div>
</body>
</html>
ボタンを押すとアップダウンが切り替わり動作します。
