0

$(".on").click(function() {
  $(".main").toggleClass("main__night");
});
.main {
  background: url(../img/daybackground.png) no-repeat center top;
}

.main__night {
  background: url(../img/nightbackground.png) no-repeat center top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" id="main"></div>

1

2 ответа 2

2

Если есть возможность, можете использовать одну картинку, состоящию из двух.
Например как эта:

----

А там уже изменяем background-position.
Ниже пример:

$('input[type="button"]').on('click', function(){
  $('.block').toggleClass('active');
});
.block {
  display: block;
  width: 225px;
  height: 150px;
  background: url('https://i.stack.imgur.com/FpEZQ.png') no-repeat top center / auto 200%;
}

.block:not(.active) {
  background-position: top center;
}

.block.active {
  background-position: bottom center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block"></div>
<input type="button" value="toggle">

0

Ужать картинку. Судя по тому, что у Вас png, она слишком много весит и долго грузится. Вот пример с обычным jpg - Ваш код прекрасно работает, безо всяких белых кадров:

$(".on").click(function(){
  $(".main").toggleClass("main__night");
});
div {
  height: 600px;
}
.main {
    background: url(https://avatars.mds.yandex.net/get-pdb/33827/eb1233b6-e0c6-4025-b5f9-d9c0b163fcae/s1200) no-repeat center top;
}
.main__night {
    background: url(https://avatars.mds.yandex.net/get-pdb/989257/686ff985-8427-41f2-820a-f1280233f97c/s1200) no-repeat center top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="on">click</button>
<div class="main" id="main">
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.