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

【问题标题】：How to move an element to the extreme right and then hide it?如何将元素移动到最右边然后隐藏它？
【发布时间】：2017-04-16 11:19:10
【问题描述】：

当我点击一个按钮时，标题元素应该移动到页面的最右边，它的不透明度会慢慢降低，一旦元素移动到最右边，它应该被隐藏。

我已经使用 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>

我的问题是元素向右移动，不透明度降低。只有不透明度正在降低。元素向右移动后如何完全隐藏元素？

提前致谢:)

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案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>

【讨论】：