javascript - AnythingSlider FX 问题

Question

我正在尝试将各种FX与AnythingSlider一起使用(左，右，特别是在这种情况下淡入淡出)并遇到一些问题。将所有幻灯片设置为“淡入淡出”FX 后，一切似乎都正常工作(请参阅下面的链接):

http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_fade.html

但是，将所有幻灯片设置为“左”或“右”FX 时，幻灯片在旋转时会不同步(请参阅下面的链接):

http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_right.html

知道发生了什么吗？

提前致谢!

Answer 1

问题在于整个面板都处于动画状态。因此，当最后一个或下一个(取决于方向)面板移出 View 时，它实际上最终会与当前面板重叠。所以你有两个选择:

1. 将面板的内容包装在一个元素中并将其作为动画的目标。这样做的原因是面板本身应用了 overflow:hidden 属性，因此内容不会与其他面板重叠。

   <div class="left">
     <div class="content-wrapper"> <!-- add this content wrapper -->
       <div class="caption"></div>
       <img src="../slide1.jpg" alt="" />
     </div>
   </div>
   

2. 添加 .activePage { z-index: 1; } 到你的CSS。这是有效的，因为当前面板将始终位于顶部。此解决方案的主要问题是您会看到其他面板在后台奇怪地移动。