Question

我正试图弹回一个元素并以平稳的步骤从右向左移动。

以下是我尝试过但我无法获得良好的平滑效果。如果我从jQuery中删除right: '+=5px'，它会更加流畅地动画，但仍然不是我想要的。

一旦球停止动画，我也想用文本显示div。我无法理解这一点。

＆＃13;

$(document).ready(function() {
  $(".ball-wrapper").queue(function() {

    $(this).animate({top: '+=150px'}, {duration: 500, queue: true});
    $(this).animate({top: '0px', right: '+=5px'}, {duration: 500, queue: true});
    $(this).animate({top: '+=120px'}, {duration: 500, queue: true});
    $(this).animate({top: '0px', right: '+=5px'}, { duration: 500, queue: true});
    $(this).animate({top: '+=100px'}, {duration: 500,queue: true});
    $(this).animate({top: '0px', right: '+=5px'}, {duration: 500,queue: true});
    $(this).animate({top: '+=50px'}, {duration: 500, queue: true});
    $(this).animate({right: '+=600px'}, {duration: 3500, queue: false});

    $.dequeue(this);
  });
  
  $(".ball-wrapper .text").css('display','block');
});

＆＃13;

.ball-wrapper {
  background-color: red;
  width: 100px;
  height: 100px;
  float:right;
  border-radius:100px;
  position:relative;
}
.ball-wrapper .text {
  display: none;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bouncing-wrapper">
  <div class="ball-wrapper">
    <span class="ball"></span>
    <span class="text">Text text...</span>
  </div>
</div>

＆＃13;

Answer 1

查看此文章：http://www.webdevdoor.com/jquery/tutorial-simple-jquery-bouncing-ball/

在http://jsfiddle.net/c23sye45/1/中的

我添加了新代码：

$('#ball').animate({
        left: '100px'
    },
    {        
        duration: 3500, 
        queue: false,
        easing:'linear',
        complete:function(){
          $('#ball').stop(true);
            $('#text').show();
        }
  });

也许这会有所帮助

jQuery animate：以平滑的步骤从右向左弹跳

1 个答案: