如何將元素移動到最右端然後隱藏它？

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>