javascript - 如何将元素移动到最右边然后隐藏？

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

为此目的，您在动画完成时有回调。另外，给你的元素一个固定的宽度，这样它就会顺利消失，'world' 就不会出现在第二行

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