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

Мога ли да използвам fadeIn или fadeOut при 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 с текст и h1 тагове. - person Joseph Montecalvo; 03.03.2015

arrow_upward
0
arrow_downward

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

person ThePavolC    schedule 03.03.2015