>

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

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

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

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

CSS

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

JQ

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

  • 답변 # 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] 고성능 애니메이션

  • 이전 python 3.x - Cython 스크립트에서 속도 향상을 위해 npzeros 대신 memset 사용
  • 다음 android studio - 에뮬레이터에 ui가 표시되지 않음