요소를 맨 오른쪽으로 이동 한 다음 숨기는 방법은 무엇입니까?

Question

버튼을 클릭하면 heading 요소가 페이지의 맨 오른쪽으로 이동해야합니다. 불투명도가 천천히 감소하고 요소가 오른쪽으로 이동되면 숨겨야합니다.

jquery animation 함수를 사용했습니다.

  $(document).ready(function(){ 
 
       $('.myButton').click(function(){ 
 
        $('.myHeading').animate(
 
        { 
 
        marginLeft : '90%', 
 
        opacity : 0, 
 
        }, 1500 
 
       ); 
 
        
 
       }) 
 
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <h1 class="myHeading">Hello, world!</h1> 
 
     <button class="btn btn-warning col-xs-3 myButton">Click here to animate the heading</button>

내 문제는 요소가 감소 불투명도와 함께 오른쪽으로 이동지고 있습니다 : 아래

는 지금까지 작성한 코드입니다. 불투명도 만 감소하고 있습니다. 요소를 오른쪽으로 이동 한 후에 요소를 완전히 숨기는 방법은 무엇입니까? 사전 :

Answer 1

에서

덕분에 당신은이 목적을 위해 애니메이션 완료에 callback 있습니다. 또한, 귀하의 요소를 두 번째 줄

$(document).ready(function(){ 
 
       $('.myButton').click(function(){ 
 
        $('.myHeading').animate(
 
        { 
 
        marginLeft : '80%', 
 
        opacity : 0, 
 
        }, 1500, hideElement 
 
       ); 
 
        
 
       }) 
 
       function hideElement(){ 
 
       $('.myHeading').hide() 
 
       } 
 
      })

h1{ 
 
    width: 200px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <h1 class="myHeading">Hello, world!</h1> 
 
     <button class="btn btn-warning col-xs-3 myButton">Click here to animate the heading</button>