过渡效果 - 淡入淡出答案

【问题标题】：Transition effect - Fade to Slide过渡效果 - 淡入淡出
【发布时间】：2014-09-13 07:59:09
【问题描述】：

我正在使用我找到的这个滑块：

Lean Slider

我想知道是否有可能将它的过渡效果从 FADE 更改为 SLIDE？我有 javascript/JQuery 的基本知识。我试图寻找它，但代码中没有提到“淡入淡出”或“滑动”，所以我不知道从哪里开始。

谢谢。

【问题讨论】：

显示你迄今为止尝试过的代码..

标签： jquery css slider

【解决方案1】：

在此滑块中，使用 css opacity 属性给出淡入淡出效果。

我已经更新了幻灯片效果的 css。看看这是否有帮助。

使用margin 而不是opacity。

.slider-wrapper { 
    position: relative; 
    background: #fff url(images/loading.gif) no-repeat 50% 50%;
    min-width: 100%;
    min-height: 100%;
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
    overflow: hidden; //Added this
}
.lean-slider { /* overflow: hidden; */ width: 1000%;}
.lean-slider-slide {
    display: block;
    position: relative;
    -webkit-transition: margin 0.6s linear;
    -moz-transition: margin 0.6s linear;
    -ms-transition: margin 0.6s linear;
    -o-transition: margin 0.6s linear;
    transition: margin 0.6s linear;

    width: 800px;
    margin-left: -800px;
}
.lean-slider-slide.current { margin-left: 0; }

【讨论】：

谢谢！！有效！但图像交换不顺畅......一个进去一个不同时出去 - 所以我在交换之间得到一个空白的背景。我希望它们排成一排……然后像传送带一样移到一边。我该怎么办？
不确定是否只能使用 CSS 来实现。这将需要编辑插件。快速建议找到并使用另一个插件而不是现有的。