이 jquery 애니메이션이 작동하지 않는 이유는 무엇입니까?

Question

ive 클릭에 따라 사이드 바를 왼쪽이나 오른쪽으로 슬라이드하려고했습니다.

토글을 사용해도 작동하지 못했습니다. 처음 클릭하면

내가 지금은이 코드를 작품을 시도했지만 다시 한번 클릭 할 때 작동하지 않습니다 어떤 이유로 클릭 :

$('.pushbutton').on('click',function(){ 

     $('.left_sidebar, .footer').animate({left: "-320px"}, 800); 
     $('.main_body_right').animate({marginLeft: "25px"}, 800); 
     $('.pushbutton').animate({fontSize: "24px",fontWeight: "400",paddingTop: "3px"}, 500); 
     $('.pushbutton').html('+'); 
     $('.pushbutton').attr('class','pushbuttonplus'); 

    }); 

    $('.pushbuttonplus').on('click',function(){ 

     $('.left_sidebar, .footer').animate({left: "0px"}, 800); 
     $('.main_body_right').animate({marginLeft: "325px"}, 800); 
     $('.pushbuttonplus').animate({fontSize: "26px",fontWeight: "700",paddingTop: "0px"}, 500); 
     $('.pushbuttonplus').html('-'); 
     $('.pushbuttonplus').attr('class','pushbutton'); 

    }); 

Answer 1

필자는 이런 논리를 변경하는 대신 이런 짓을 :

// Make the push sidebar push button functional 
    $('.pushbutton a').on('click',function(event){ 

     event.preventDefault(); 

     var currentId = $(this).attr('id'); 

     if(currentId == 'open_sidebar'){ 

      $('.left_sidebar, .footer').animate({left: "-320px"}, 800); 
      $('.main_body_right').animate({marginLeft: "25px"}, 800); 
      $('#open_sidebar').html('<a href="#">+</a>'); 
      $('#open_sidebar').attr('id','close_sidebar'); 

     } 

     if(currentId == 'close_sidebar'){ 

      $('.left_sidebar').animate({left: "0px"}, 800); 
      $('.footer').animate({left: "40px"}, 800); 
      $('.main_body_right').animate({marginLeft: "325px"}, 800); 
      $('#close_sidebar').html('<a href="#">-</a>'); 
      $('#close_sidebar').attr('id','open_sidebar'); 

     } 

    }); 

이것은 당신이 동적으로 변화되기 때문에

Answer 2

이/추가/요소의 클래스를 제거, 셀렉터가 어떤 바인딩되지 않습니다 :) 트릭을 할 솔기 요소.

대신 event delegation을 사용하면 특정 선택자가 일치하는 경우에만 본문에 이벤트가 첨부됩니다.

은 참조 :

선택기가 제공된다

이벤트 핸들러 위임로 지칭된다. 이벤트가 바운딩 요소 에서 직접 발생하지만 이 선택 자와 일치하는 하위 항목 (내부 요소)에 대해서만 처리기가 호출되면 처리기가 호출되지 않습니다. jQuery는 이벤트 대상에서 까지 이벤트를 처리기가 연결된 요소 (즉 가장 바깥 쪽 요소 인 의 가장 안쪽)에 연결하고 셀렉터와 일치하는 경로에있는 경로를 따라 처리기를 실행합니다.

코드 :

이

$('body').on('click','.pushbutton', function() { 

    alert("demo1") 

    $('.left_sidebar, .footer').animate({ 
     left: "-320px" 
    }, 800); 
    $('.main_body_right').animate({ 
     marginLeft: "25px" 
    }, 800); 
    $('.pushbutton').animate({ 
     fontSize: "24px", 
     fontWeight: "400", 
     paddingTop: "3px" 
    }, 500); 
    $('.pushbutton').html('+'); 
    $('.pushbutton').attr('class', 'pushbuttonplus'); 

}); 

$('body').on('click','.pushbuttonplus', function() { 

     alert("demo2") 

    $('.left_sidebar, .footer').animate({ 
     left: "0px" 
    }, 800); 
    $('.main_body_right').animate({ 
     marginLeft: "325px" 
    }, 800); 
    $('.pushbuttonplus').animate({ 
     fontSize: "26px", 
     fontWeight: "700", 
     paddingTop: "0px" 
    }, 500); 
    $('.pushbuttonplus').html('-'); 
    $('.pushbuttonplus').attr('class', 'pushbutton'); 

}); 

데모 :