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

也許這將幫助