홈>2020-03-18 16:02

javascript - 클릭으로 레이어를 이동하는 방법

메뉴 아이콘을 클릭하면 화면 오른쪽에서 슬라이드하는 메뉴를 만들고 있습니다. 그것은 jquery를 만드는 방법을 모른다는 것입니다. 지금은 페이지로드 후 화면의 절반을 덮도록 메뉴 슬라이드를 만들 수 있었지만 메뉴 아이콘을 클릭 한 후 애니메이션으로 변경 한 다음 메뉴 아이콘을 클릭하면 오른쪽 (왼쪽 : 100 %)으로 돌아갈 수 있도록 도와 줄 수 있습니다. 두 번째로?

페이지로드에서는 작동하지만 다음과 같이 작동하지는 않습니다.

$("button").click(function(){

다음은 제가하는 일입니다 :

CSS

#menulayer {
height: 100%;
width: 100vw;
background-color: #999;
position: fixed;
z-index: 1;
left: 100%;
}

$(document).ready(function(){
$("#menulayer").delay(3000).animate({left:'50%'});
});

javascriptjquerycssmenu

답변 # 1
jQuery의 on 를 사용했습니다. click 가 아닌 클릭 바인딩 메모리 사용이 개선되고 초기로드 후 추가 된 동적 요소를 처리하기 위해. 간단한 toggleClass 메뉴를 표시하거나 숨기려면 트릭을 수행합니다. CSS에서 메뉴의 초기 상태를 화면 밖으로 설정 한 다음 open 로 설정하면 알 수 있습니다. 수업이 추가되면 화면에 부드럽게 애니메이션됩니다.

참고 :DOM 요소를 이동할 때 translate 를 사용하려고합니다 left 보다는 right 애니메이션은이 방법으로 더 매끄럽고 때로는 최적화되지 않은 애니메이션과 관련된 글리치 동작 (또는 "정크")을 피할 수 있습니다. [1]
```
$('.toggle-button').on('click', function() {
  $('.menu').toggleClass('open')
})
```
```
.toggle-button {
  position: absolute;
  top: 50px;
  left: 50px;
  border: 1px solid #333;
}
.menu {
  background: red;
  display: inline-block;
  padding: 20px 40px;
  position: fixed;
  right: 0;
  transform: translateX(100%);
  transition: 0.5s transform;
}
.menu.open {
  transform: translateX(0);
}
```
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button">toggle menu</button>
<ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
```
[1] 고성능 애니메이션

Python2.net

javascript - 클릭으로 레이어를 이동하는 방법

관련 자료