要素を右端に移動して非表示にするにはどうすればいいですか？

Question

ボタンをクリックすると見出し要素がページの右端に移動し、不透明度が緩やかに低下し、要素が右端に移動すると非表示にする必要があります。

私はこれを行うためにjqueryアニメーション関数を使用しています。以下は

私がこれまでに書いたコードです：

  $(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>