幻灯片动画

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