Fade в новом фоновом изображении Jquery - PullRequest
Новая
       52

Fade в новом фоновом изображении Jquery

1 голос
/ 24 октября 2019

У меня есть div с заданным фоновым изображением: 

#section0{
        background-image: url("images/top_back2.jpg");
    }

У меня есть функция setTimeout, изменяющая фоновое изображение на что-то другое через 3 с 

    $("#section0").css("background-image", "url(images/top_back.jpg)");
        }, 3000);

Это работает нормально, ноКажется, я не могу заставить это изображение исчезать независимо от того, что я пытаюсь.

Любые идеи будут оценены, они просто появляются на экране, как это, и это очень неприятно. Я не могу добавить CSS3-эффект постепенного изменения во весь элемент, поскольку содержимое внутри не отображается в течение первых 3 секунд, и мне нужно, чтобы оно появилось.

Спасибо!

1 Ответ

0 голосов
/ 24 октября 2019

Вы также должны определить, как он исчезает, вы можете использовать opacity для достижения этого эффекта, а затем параметр transition, который определяет свойства анимации, такие как длительность и замедление.

CSS: 

#section0{
     opacity: 0;
     transition: opacity 2s; /* Define the duration of the opacity animation */
     background-image: url("images/top_back2.jpg");
}

JavaScript (внутри вашего setTimeout): 

$("#section0").css({
     "opacity" : 1,
     "background-image": "url(images/top_back.jpg)"
});

Демонстрация JSFiddle с кодом https://jsfiddle.net/wtbmdaxc/

Наслаждайтесь :)

Обновление:

Чтобы избежать покрытия текста, есть два способа сделать это: либо вы разделяете фоновое изображение на другой DIV и примените прозрачность к этому новому DIV, или вы создаете псевдоэлемент . Оба из них уже были даны ответы на SO раньше.

Давайте попробуем первый способ, как он будет работать в вашем случае

HTML: 

<div id="section0">
  Example test. Lorem ipsum dolor sit amet.
  <div id="bg-opacity"></div>
</div>

CSS: 

#section0{
}

#section0 #bg-opacity{
     position: absolute; /* Force this layer to appear at the top left of the div */
     top: 0;
     left: 0;
     z-index: -1; /* Makes the image appear in the back and not covering the texts */
     opacity: 0;
     transition: opacity 2s; /* Define the duration of the opacity animation */
     height: 500px;
     width: 500px;
     background-image: url("https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif");
}

JavaScript: 

setTimeout(function(){ 
  $("#bg-opacity").css({
       "opacity" : 1,
       "background-image": "url(https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif)"
  });
}, 300);

И новое демо на JSFiddle: https://jsfiddle.net/zr7Lf0m5/

...