Использование fadeIn fadeOut на setTimeout?

Могу ли я использовать затухание или затухание в setTimeout? У меня есть 3 фоновых изображения в массиве, и я хочу, чтобы каждое из них медленно исчезало.

Это мой код, который работает нормально, я просто хотел бы, чтобы переход был медленным, а не супер быстрым, как сейчас.

$(function () {
var nextImage = $('.main-background');
var backgrounds = [
  'url(<?= $image_url ?>/big-main-background-1.jpg)', 
  'url(<?= $image_url ?>/big-main-background-2.jpg)', 
  'url(<?= $image_url ?>/big-main-background-3.jpg)'];

var current = 0;

function nextBackground() {
    nextImage.css(
        'background',
    backgrounds[current = ++current % backgrounds.length]);

    setTimeout(nextBackground, 4000);
}
setTimeout(nextBackground, 4000);
nextImage.css('background', backgrounds[0]);
});

jquery fadein fadeout settimeout
person Joseph Montecalvo    schedule 03.03.2015    source источник
comment
Я не думаю, что вы можете скрыть фон с помощью CSS. Но вы можете сделать это, используя несколько реальных изображений, наложенных друг на друга и изменяя их непрозрачность.   -  person Daniel Cheung    schedule 03.03.2015
comment
Это означает, что на изображении 1 (непрозрачность равна 1), изображении 2 и изображении 3 (непрозрачность 0). Затем, когда изображение 2 показывает, что непрозрачность равна 1, а для изображений 1 и 3 непрозрачность становится равной 0. Что-то вроде этого?   -  person Joseph Montecalvo    schedule 03.03.2015

Ответы (2)


arrow_upward
2
arrow_downward

Пожалуйста, проверьте эту скрипту: https://jsfiddle.net/3xdzxpmh/1/

Вот другой подход, вы можете не стесняться спрашивать, если у вас есть какие-либо вопросы.

Просто замените стиль или содержимое своим фоном.

Если вы хотите применить это к своему контейнеру, вставьте следующую структуру в свой основной контейнер и максимально увеличьте его ширину и высоту.

Вот структура:

<div class="container">
    <div style="background:red"></div>
    <div style="background:yellow"></div>
    <div style="background:blue"></div>
</div>

Вот JS, который я изменил из вашего кода:

var current = 0;
$(function(){
    var l = $(".container div").length;
    change();
    function change() {
        current = ++current % l;
        $(".container div").removeClass("show");
        $(".container div:nth-child("+(current+1)+")").addClass("show");
        setTimeout(change,2000);
    }
});

А вот и CSS:

.container {
    position:relative;
}

.container > div {
    width:200px;
    height:200px;
    top:0;
    left:0;
    position:absolute;
    opacity:0;
    transition:1s all ease;
}

.container > div.show {
    opacity:1;
}

По сути, класс CSS .show указывает, что элемент должен быть непрозрачным. .container div устанавливает стиль прозрачный и имеет переход. Когда .show переключается, 2 <div> исчезают вместе, создавая эффект.

person Daniel Cheung    schedule 03.03.2015
comment
Хорошо, дайте мне несколько минут, чтобы попробовать это. Мне придется изменить весь мой HTML, потому что внутри моего основного div у меня есть другие div с текстом, и этот код, который вы предоставили, будет вызывать мои div с тегами text и h1. - person Joseph Montecalvo; 03.03.2015

arrow_upward
0
arrow_downward

Используйте функцию jQuery fadeIn(), вы можете указать там продолжительность.

person ThePavolC    schedule 03.03.2015