Встряхивание - результат отсутствия аппаратного ускорения при перерисовке. Всякий раз, когда анимация, важно выбрать определенные свойства для анимации, чтобы улучшить эту производительность. Анимация transform
- лучший выбор, чем background-size
.
Чтобы добиться перехода от меньшего к большему, я изменил функцию jQuery animate()
на просто css()
изменение преобразования шкалы. Значение внутри функции scale()
- это новый размер. В этом примере 2
равно 200% от исходного размера.
$("#container").css({
"transform": "scale(2)"
});
Добавленное свойство transition
в CSS контролирует продолжительность и любое замедление изменения. Вы можете поместить этот подход в div с помощью overflow: hidden
для достижения эффекта фонового изображения.
$('body').on('click', '#container', function() {
// use transform instead of animating background-size
$("#container").css({
"transform": "scale(2)"
});
});
#container {
width: 500px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
background-color: #eeeeee;
background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
background-repeat: no-repeat;
background-position: center;
/* control the transition speed here, the second value is duration */
transition: all 3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>