褪色與運動相結合

Question

我希望這個問題沒有確切的重複......但這些相關問題都沒有幫助我解決我的問題。我想創建一個無限的「流」矩形動畫。每當用戶點擊一個元素我想：

• 的所有元素，包括新的，慢慢移動到左邊，直到第二個矩形在第一個矩形
• 第一個矩形的地方淡出

$('.block').first().animate({ 
     opacity: 0.75, 
     left: '-=50' 
    }, 300, function() { 
     $('.block').first().remove(); 
     addBlock(index++); 
    }); 

：
• 一個新的矩形末

到目前爲止，我想出了這個(According jsFiddle)淡入

使不透明度動畫效果良好，向左移動不會。我懷疑這可能是由於周圍的div。但說實話，我對網絡技術並沒有多少線索，這就是爲什麼我問你。

• 我能做些什麼來使矩形左移？
• 我可以將它們移動到左邊而「滑動」在周圍的div？

Answer 1

只需添加position:relative到你的CSS .block項，請使用marginLeft，你會得到預期的效果 -

http://jsfiddle.net/BsEWp/67/

滑動它的包裝DIV下，所有你需要做的給包裝元素一個css屬性overflow:hidden。

Answer 2

可能是這樣嗎？

$('.block').first().animate({ 
    opacity: 0.25, 
    width: '-=50' 
} 

或：

$('.block').first().animate({ 
    opacity: 0.25, 
    marginLeft: '-=50' 
} 

它的作品