jQuery动画效果：以平滑步骤从右向左弹跳

Question

我试图弹出一个元素，并以平滑步骤从右向左移动它。

下面是我试过的，但我无法得到一个很好的光滑效果。如果我从jQuery中删除right: '+=5px'，它的动画更流畅，但仍不完全符合我的要求。

我还想在球停止动画时显示带文本的div。我无法弄清楚。

$(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'); 
 
});

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

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

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(); 
     } 
    }); 

也许这将帮助