Javascript-форум - Переход по ссылке после анимации методом animate

Доброго времени, уважаемые участники! Прошу помощи, если не сильно затруднит. Делаю анимацию перехода страниц. Столкнулся с проблемой: не вызывается функция завршения. Т.е., анимация работает, элементы фэйдятся, но не получается установить время на работу анимации (анимация 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 день бьюсь, кажется уже все пересмотрел.