如何将元素移动到最右端然后隐藏它？

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>