slideUp() disappears as the element's height becomes shorter
slideDown()은 요소의 세로 길이가 아래방향으로 길어지면서 다시 보여지는 기능을 갖고 있습니다.
slideDown() has the ability to be redisplayed as the height of the element grows downward.
위와 같이 위로 사라지고 아래로 나오면서 표시되는 기능이 slide입니다..
위의 예제의 소스를 구현해 보면, 이제 이정도 소스만 보셔도 그냥 아실거라고 생각합니다.
This is a very simple source that makes the [show click] and [hide click] buttons and presses [show click] to slideUp and [hide click] to slideDown.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var ex_show = $('.ex_show');
var ex_hide = $('.ex_hide');
var ex_box = $('.ex_box');
ex_show.click(function(){
ex_box.slideDown();
});
ex_hide.click(function(){
ex_box.slideUp();
});
});
</script>
<style type="text/css">
.ex_show{float:left;margin-right:20px;cursor:pointer}
.ex_hide{float:left;cursor:pointer}
.ex_box{clear:both; float:left; width:100px; height:50px; background-color:yellow; border:1px solid skyblue; border-radius:10px}</style>
</head>
<body>
<b class="ex_show">show click!!</b>
<b class="ex_hide">hide click!!</b>
<div class="ex_box"></div>
</body>
</html>
You can control the time you see slowly and slowly to your liking.
You can control the time by putting a number in parentheses. 1000 means 1 second.
So how do you express 0.5 seconds? Since 1000 is 1 second, half of 500 is 0.5 seconds.
It is possible to input after wrapping fast, slow in '' fast means 200 and slow means 400.
The time hidden as shown above can be set differently.
Please practice using the sources below.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var ex_show_3000 = $('.ex_show_3000');
var ex_hide_fast = $('.ex_hide_fast');
var ex_box_3f = $('.ex_box_3f');
ex_show_3000.click(function(){
ex_box_3f.slideDown(3000);
});
ex_hide_fast.click(function(){
ex_box_3f.slideUp('fast');
});
});
</script>
<style type="text/css">
.ex_show_3000{float:left;margin-right:20px;cursor:pointer}
.ex_hide_fast{float:left;cursor:pointer}
.ex_box_3f{clear:both; float:left; width:100px; height:50px; background-color:yellow; border:1px solid skyblue; border-radius:10px}
</style>
</head>
<body>
<b class="ex_show_3000">show click!!</b>
<b class="ex_hide_fast">hide click!!</b>
<div class="ex_box_3f"></div>
</body>
</html>
done. thank you
Next time is animtaed.
Thank you for visiting. If you have any inquiry or explanation of mistakes, please use the comments below.
ALL COMMENTS 0
Sort by
