在动画之前不显示任何内容

Question

当用户单击带有'data-scrollTo =“的元素时，它们将被发送到相应部分。我有一个jQuery滚动动画，我希望在相应部分的” display“属性设置为之前执行但是，发生的是在我的jQuery滚动动画之前执行了“ display：block”。此外，我正在使用“ if-else if block”来测试相应部分的display属性是否设置为'none '，如果将其设置为“ block”以便可以显示，则将当前部分设置为“ none”以使其隐藏。

HTML：

<section id="ageRange-questions">

        <h3 class="title">What Favorite Era?</h3>
        <ul class="age">
            <li class="age__selection scrollTo" data-scrollTo="contentPref-questions"><label for="50s"></label><input class="age__input" id="50s" type="image" src="img/myimage.js" alt="ted_50s"></li>
            <li class="age__selection scrollTo" data-scrollTo="contentPref-questions"><label for="60s"></label><input class="age__input" id="60s" type="image" src="img/myimage.jpg" alt="ali_60s"></li>
            <li class="age__selection scrollTo" data-scrollTo="contentPref-questions"><label for="70s"></label><input class="age__input" id="70s" type="image" src="img/myimage.jpg" alt="hank_70's"></li>
            <li class="age__selection scrollTo" data-scrollTo="contentPref-questions"><label for="80s"></label><input class="age__input" id="80s" type="image" src="img/myimage" alt="joe_80's"></li>
            <li class="age__selection scrollTo" data-scrollTo="contentPref-questions"><label for="90s"></label><input class="age__input" id="90s" type="image" src="img/myimage" alt="jordan_90's"></li>
            <li class="age__selection scrollTo" data-scrollTo="contentPref-questions"><label for="00s"></label><input class="age__input" id="00s" type="image" src="img/myimage.jpg" alt="phelps_00's"></li>
        </ul>
    </section>    



<section id="contentPref-questions" style="display: none;">
            <h3 class="title">How Your Favorite Programming Language?</h3>
            <div class="questions-image__wrapper">
                <img class="questions-image" src="https://media.giphy.com/media/QJITvgD5ID4u4/giphy.gif" alt="blooper gif">
            </div>
            <ul class="contentList">
                <li class="contentListAnswer scrollTo" data-scrollTo="recommend-questions">
                    <span class="fa fa-square-o"></span>
                    <span class="contentListText">JavaScript</span>
                </li>
                <li class="contentListAnswer scrollTo" data-scrollTo="recommend-questions">
                    <span class="fa fa-square-o"></span>
                    <span class="contentListText">Python</span>
                </li>
                <li class="contentListAnswer scrollTo" data-scrollTo="recommend-questions">
                    <span class="fa fa-square-o"></span>
                    <span class="contentListText">C++</span>
                </li>
            </ul><!--- end contentList --->
        </section>

jQuery：

$('.scrollTo').on('click', function () {

        // data-scrollTo = section scrolling to name
        const scrollTo = $(this).attr('data-scrollTo');

        // toggle active class on and off.
        $(this).each(function () {
            if (scrollTo === $(this).attr('data-scrollTo')) {
                $(this).addClass('on');
            } else {
                $(this).removeClass('on');
            }
        });

        // animate and scroll to the section
        $('body, html').animate({
            // the magic - scroll to section
            scrollTop: $('#' + scrollTo).offset().top
        }, 700);


            if ($(this).parent().parent().next().css('display') === 'none') {
                $(this).parent().parent().next().css({'display': 'block'});
                $(this).parent().parent().css({'display': 'none'});
            } else if (!$(this).parent().parent().next().css('display') === 'block') {
                $(this).parent().parent().next().css({'display': 'none'});
            }
    }) // scroll()