[ProFX5016]

Доброго времени, уважаемые участники! Прошу помощи, если не сильно затруднит. Делаю анимацию перехода страниц. Столкнулся с проблемой: не вызывается функция завршения. Т.е., анимация работает, элементы фэйдятся, но не получается установить время на работу анимации (анимация 2с, а время на выполнение - сколько браузер даст). Помогите, пожалуйста, где я ошибся? Пробовал SetTimOut, но видимо и его я не верно применял.

$('div.panel-functions').click(function(event){
	event.preventDefault();
		var box = $('.element_13, .element_7, .element_10, .element_12, .element_14, .element_15, .element_16, .element_17, .element_18, .element_19, .element_20, .element_21, .element_11, .element_223');
		var opacity = box.css('opacity');
		box.animate({opacity: "0"}, 2000, function(){
			document.location = location.href
		});
});

<div class="panel-functions" onclick="location.href = '/popup/scenes/12.html';">
    <div data-page="weather" class="icon"><i class="fas fa-sliders-h fa-6x"></i><span class="title">control</span></div>
</div>

CSS

.panel-functions {
      box-sizing: border-box;
      width: 32px;
      height: 32px;
      padding: 0px;
      align-items: center;
      justify-content: space-around}

.panel-functions .icon {
      margin: 0;
      width: 82px;
      height: 82px;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      border: 5px solid rgba(138, 43, 226, 0.6);
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     border-radius: 15px}

.panel-functions .icon .fas, .panel-functions .icon .far {
      margin: 3px 0px 5px 0px;
      font-size: 60px}

.panel-functions .icon .title {
      font-size: 13px;
      text-align: center;
      text-transform: uppercase;
      font-family:'Wallpoet'}

Прошу прощения, если ответ пропустил где-то на форуме... Просто 3 день бьюсь, кажется уже все пересмотрел.