幻燈片動畫

Question

我有一個簡單的動畫問題，基本上，我需要製作一個元素，好像它看起來向左滑動，然後從下一張圖像回來。這樣的畫廊可以工作，但不是動畫。

這是我有：

$('.slideshow-container').animate({ left: -$(document).width()}, 'slow', function() { 
    $('.prev').click(); 
    $('.slideshow-container').css({left: 'auto'}); 
    $('.slideshow-container').css({right: $(document).width()}); 
    $('.slideShow-container').animate({right : 'auto'}); 
}); 

滑出，但並沒有真正回來:(

任何幫助

Answer 1

首先 jQuery的動畫必須使用數值工作正確地，您不能使用「自動」或其他非數字值。

Second，你不能只使用1個元素來做到這一點，因爲你想顯示一個來自左邊，而另一個正在離開右邊。

三，當使用jQuery的動畫API，我建議只用類似性質的一個工作，如左右，上下等等...

那麼，是什麼你應該這樣做以達到你想要的效果：

1. 使用一個元素來顯示滑塊中的實際圖像。
2. 如果用戶按'next'，第二個元素的位置就是第一個元素的寬度（您也可以浮動元素來完成此操作）。
3. 如果用戶按下'prev'，第二個元素的位置就是它自身的負數。
4. 一旦元素正確定位，您只需修改Left或Right CSS屬性，但只有一個，修改兩者都會給您帶來麻煩。

Cheers