хочу сделать изменение BGS плавно, как исчезающие вещи

Question

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

Вот пример кода, который я получил от кого-то другого:

var images = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
var curImage = 0;
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
}
window.setInterval(switchImage, 5000);

Этот код мгновенно меняет фоновое изображение, но я хочу, чтобы новое фоновое изображение исчезло.

Вот ссылка на страницу, которую я создаю:

http://preferredmerchantservices.net/

Я надеюсь, что кто-то может мне помочь, и спасибо заранее.

Answer 1

Посмотрите на этот вопрос:

Исчезновение на фоновом изображении

Вот ссылка, объясняющая, как сделать переход с постепенным исчезновением с помощью jQuery:

http://jqueryfordesigners.com/image-loading/

Если вам нужна библиотека jQuery, вы можете вставить этот код на свою страницу:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Answer 2

Если вы не хотите терять слишком много времени, пытаясь разобраться в себе, вам следует использовать такую ​​библиотеку, как jQuery .При этом это всего лишь вопрос fadeIn() и fadeOut().

Поскольку вы новичок в веб-разработке, вы должны знать, что jQuery - это действительно популярная библиотека, которую в настоящее время используют почти все.Это позволяет писать меньше кода и делать больше.

Но самое главное, это обеспечивает кросс-браузерную совместимость.