Изображение Javascript кроссфейд при смене страницы

Question

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

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

Как бы я обозначил каждое изображение на странице HTML? Это работает, или мне пришлось бы радикально изменить свою веб-страницу, чтобы изменить только контент и не загружать отдельный HTML?

Answer 1

Посмотрите на функцию анимации JQuery: она выглядит так:

$("#idOfYourImage").animate({opacity: 1}, 1000, function(){
  //Function to be executed when the animation is done
})

Второй параметр (1000) обозначает продолжительность анимации.

Чтобы это работало, вы должны установить изображение css на opacity: 0, чтобы оно могло анимироваться между opacity 0 и opacity 1 (это называется постепенным появлением)

Знак доллара означает JQuery, вы должны включить этот скрипт, чтобы он работал