슬라이드 토글 구현



See the Pen 슬라이드 토글 by yoonbitnara (@yoonbitnara) on CodePen.




상세코드

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>제이쿼리 슬라이드</title>
</head>

<body>
  <button type="button" id="rollBtn">슬라이드 토글</button>
  <div id="roll"></div>
</body>

</html>



CSS

@charset "UTF-8";

div#roll {
  width: 200px;
  height: 300px;
  border: 1px solid #000;
  background-color: #efefef;
  display: none;
}

button {
  font-size: 30px;
  cursor: pointer;
  margin-bottom: 20px;
}



jQuery

$("button#rollBtn").mouseover(function () {
  $("div#roll").slideDown(2000);
});

$("button#rollBtn").mouseout(function () {
  $("div#roll").slideUp(1000);
});

Leave a comment