Question

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

我使用了jquery动画功能来做到这一点。

以下是我到目前为止编写的代码：

＆＃13;

          $(document).ready(function(){
              $('.myButton').click(function(){
                  $('.myHeading').animate(
                  {
                     marginLeft : '90%',
                     opacity : 0,
                  }, 1500
                  );
                  
              })
          })

＆＃13;

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

＆＃13;

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

提前致谢：）

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>

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

1 个答案: