slideDown, slideUp
jQuery 의 내장 메소드인 slideDown, slideUp
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#slide {
padding: 5px;
text-align: center;
background: aqua;
}
#first {
display: none;
background: yellow;
height: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
window.onload = () => {
$("#slide").mouseover(() => {
$("#first").slideDown("slow");
});
$("#slide").mouseout(() => {
$("#first").slideUp("slow");
});
};
</script>
</head>
<body>
<div id="slide">[오늘의 공지]</div>
<div id="first">
오늘의 공지사항<br />
입니다<br />
안녕
</div>
</body>
</html>728x90
'FE > JavaScript' 카테고리의 다른 글
| [JavaScript] jquery_ui - datepicker, draggable (0) | 2024.03.27 |
|---|---|
| [JavaScript] 답글 달기 기능 만들기 (0) | 2024.03.27 |
| [JavaScript] append, html (0) | 2024.03.27 |
| [JavaScript] animate (0) | 2024.03.27 |
| [JavaScript] 클래스 추가, css 추가 (0) | 2024.03.27 |