Вот код HTML
section.section-8(style="background-image:url(img/form2-section-05-01.jpg)")
.container
.row
.col-lg-6
.col-lg-4.col-lg-offset-1.col-md-8.col-md-offset-2
h3.text-white.text-uppercase Всегда на связи
p.text-white Легко отправить отпечатки через WiFi, переиздание предыдущих заданий, а также управлять очереди печати с нашим новым сенсорным интерфейсом и беспроводной связи.
.tab-block.text-xs-center
ul.nav.nav-tabs(role='tablist')
li.active(role='presentation')
a.link-1(href='#link-1', aria-controls='link-1', role='tab', data-toggle='tab')
i.fa.fa-comment.tab-icon
li(role='presentation')
a.link-2(href='#link-2', aria-controls='link-2', role='tab', data-toggle='tab')
i.fa.fa-tint.tab-icon
li(role='presentation')
a.link-3(href='#link-3', aria-controls='link-3', role='tab', data-toggle='tab')
i.fa.fa-share-alt.tab-icon
// Tab panes
.tab-content
#link-1.tab-pane.active(role='tabpanel')
p 1. Следите за предыдущих заданий печати и использования смолы с панели управления.
#link-2.tab-pane(role='tabpanel')
p 2. Следите за предыдущих заданий печати и использования смолы с панели управления.
#link-3.tab-pane(role='tabpanel')
p 3. Следите за предыдущих заданий печати и использования смолы с панели управления.
При нажатии на .link-1, .link-2, .link-3 меняется фоновая картинка у тега section с помощью такого кода
$('.link-1').on('click', function () {
$('.section-8').css('background-image', 'url(img/form2-section-05-01.jpg)');
});
$('.link-2').on('click', function () {
$('.section-8').css('background-image', 'url(img/form2-section-05-02.jpg)');
});
$('.link-3').on('click', function () {
$('.section-8').css('background-image', 'url(img/form2-section-05-03.jpg)');
});
Проблема, что при смене фонового рисунка это заметно, мелькает белый фон, как подгрузить изначально все картинки, чтобы смена фонового изображения происходила моментально. Картинка представляет с собой лежащий смартфон на столе. Все три картинки отличаются между собой изображением на его экране, поэтому и нужна плавность переключения фонов.
Средний
