滑动框过渡效果
Swipebox Transition Effect
我正在开发一个网站,该网站使用 BrutalDesign 出色的 jQuery Swipebox 插件来显示图库图像。
https://github.com/brutaldesign/swipebox
客户询问是否可以在下一张图片上将水平动画更改为简单的淡入淡出效果(与您最初打开图库时的效果相同)。我知道 Swipebox 使用 CSS3 动画。我是 jQuery 的新手,无法通过代码找到进行此更改的正确位置。
你能帮忙吗? Github 项目对此提出了请求,但它们都已关闭或未解决。
如果 Swipebox 不能有淡入淡出动画,我想我必须寻找替代插件。
非常感谢
如果您不想编辑原始 swipebox.css,只需将其放入您的项目 css 文件中,它应该可以工作。我自己测试过。您的文件必须在滑动框 css.
之后加载
#swipebox-slider {
-webkit-transition: none;
transition: none;
}
#swipebox-slider .slide {
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}
#swipebox-slider .slide:not(.current) {
opacity: 0;
}
我正在开发一个网站,该网站使用 BrutalDesign 出色的 jQuery Swipebox 插件来显示图库图像。
https://github.com/brutaldesign/swipebox
客户询问是否可以在下一张图片上将水平动画更改为简单的淡入淡出效果(与您最初打开图库时的效果相同)。我知道 Swipebox 使用 CSS3 动画。我是 jQuery 的新手,无法通过代码找到进行此更改的正确位置。
你能帮忙吗? Github 项目对此提出了请求,但它们都已关闭或未解决。
如果 Swipebox 不能有淡入淡出动画,我想我必须寻找替代插件。
非常感谢
如果您不想编辑原始 swipebox.css,只需将其放入您的项目 css 文件中,它应该可以工作。我自己测试过。您的文件必须在滑动框 css.
之后加载#swipebox-slider {
-webkit-transition: none;
transition: none;
}
#swipebox-slider .slide {
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}
#swipebox-slider .slide:not(.current) {
opacity: 0;
}