looper.js 插件 - 交叉淡入淡出动画之间不可见的图像

Posted 2023-05-08

【中文标题】looper.js 插件 - 交叉淡入淡出动画之间不可见的图像

【英文标题】：looper.js plugin - images invisible in between crossfade animations

【发布时间】：2014-04-26 10:24:25

【问题描述】：

我一直在尝试使用 looper.js 循环遍历 div 内的各种文字或图像 (examples)

除了我使用淡入淡出动画选项 (class="xfade") 外，一切似乎都正常。 内容仅在动画期间出现，否则不可见。

通过在.looper .looper-inner 中注释掉position: relative 来解决此问题：

.looper .looper-inner 
  overflow: hidden;
  width: 100%;
  height: auto;
  /*position: relative;*/
  z-index: 2;

但是这不是一个可接受的解决方案，因为它弄乱了我在移动设备上的响应式布局。

我想这一定是我的菜鸟错误，因为我使用的是默认的官方示例......

演示： jsfiddle

感谢您的帮助。

【问题讨论】：

在 looper 的 Github 页面上找到了解决方案：github.com/rygine/looper希望对您有所帮助。

【参考方案1】：

这个looper插件好像不是很稳定，对它的支持也很差。我最终使用了另一个名为 Cycle2 的插件，它更受欢迎且高度可定制。

Cycle2 带有许多花哨的过渡，但请随时查看Cycle 了解其他更传统的过渡。

编辑：关于 looper.js，解决方案是为您正在使用的 每个 单个动画类指定 height 或 .looper .looper-inner（默认为 100 %)。