Responsive Slider - Как не исчезать на фоне при переходе между слайдами

Question

Я внедрил Responsive Slider на моем тестовом сервере: http://test -orange.com / resp /

Если вы посмотрите слайд-шоу, вы увидите, что каждый слайд исчезаети следующее исчезает, фон показывает во время исчезновения.

Я не хочу, чтобы фон показывался так.Я хочу, чтобы каждое слайд-изображение казалось незаметно переходило к следующему изображению.

Кто-нибудь знает, как я могу изменить код respiveslides.js, чтобы сделать это?Я думаю, что это часть, которая должна быть отредактирована:

      if (settings.auto === true) {
        setInterval(function () {
          $this.find(':first-child').fadeOut(fadetime, function () {
            $(this).css(hidden);
          }).next($slide).fadeIn(fadetime, function () {
            $(this).css(visible);
          }).end().appendTo($this);
        }, parseFloat(settings.speed));

Answer 1

Если вы хотите плавное затухание, вы не получите его с затуханием.Когда узел исчезает, он теряет прозрачность.При линейном затухании на половине пути оба узла являются полупрозрачными.Можно предположить, что 50% + 50% составят 100% и дадут полностью непрозрачное изображение, смешанное поровну, но это свет, а не апельсины, это не так.Со светом это выглядит так:

opacity = layerA + (layerB * layerA)

В результате вы получите непрозрачность 75%, а оставшиеся 25% оставят фон просачиваться снизу в середине затухания.,Это то, что делает кроссфейд.Для более подробных рассуждений см. Этот приятный вопрос и ответы на него .

Для плавного перехода при достижении полной непрозрачности 100% вам нужна другая техника.Вам нужно добавить новый слайд поверх предыдущего, который совсем не исчезает.Это остается на 100%, и таким образом фон не имеет шансов.После появления следующего слайда вы скрываете предыдущий.

Как правило, вместо этого:

$previous.fadeOut(fadetime);
$next.fadeIn(fadetime);

вам нужно:

$next.fadeIn(fadetime, function(){
    $previous.hide();
});