javascript - 元素淡出和淡入时如何保持DOM位置

Question

我试图在单击特定类别时隐藏类别列表并加载相应的内容。加载、淡入和淡出工作正常，但问题是，每当我淡出 div 时，页面滚动位置都会转到隐藏 div 之前的元素，并且每当新元素在滚动位置中淡出时，滚动位置仍保持在该位置最后一个元素的。如何才能使滚动位置保持不变并显示文本或 gif，以便用户可以在新元素淡入之前看到正在进行的一些工作？

这是我的paste .

HTML

<div id="main_container">
    <div id="coupon">
        <div id="left_content">
            <div id="coupon_heading">COUPON&nbsp;&#9733;&#9733;&#9733; </div>
            <div id="coupon_text">USE <strong><i>NEW20</i></strong> TO GET AN ADDITIONAL 20% OFF</div>
        </div>
        <div id="right_content">
            <div id="exclamation">OPENING<br>SALE</div>
        </div>
    </div>


    <div id="content">
        <div id="category1" class="category" data-categories="SPL">
            <img src="images/c_w.png"><div class="category_description">Chef's Special</div>
        </div>

        <div id="category2" class="category" data-categories="LCH">
            <img src="images/l_w.png"><div class="category_description">Lunch</div>
        </div>

        <div id="category3" class="category" data-categories="SNK">
            <img src="images/s_w.png"><div class="category_description">Snacks</div>
        </div>

        <div id="category4" class="category" data-categories="DNR">
            <img src="images/d_w.png"><div class="category_description">Dinner</div>
        </div>
        <ul class="items">
            <!-- Menu List -->
        </ul>
    </div>
</div>

JS

<script type="text/javascript">
$(document).ready(function(){
    $('body').on('click', '.category', function(){
        var category = $(this).data('categories');
        //alert(category);
        $('.category').fadeOut(300);
        $.ajax({
               type: "POST",
               url: "./assets/listproducts.php",
               data: {cat: category},
               cache: false,
               success: function(response){
                   //console.log(response);
                  $('#nav').html('Back').addClass('back');
                  $('.items').html(response).delay(400).fadeIn(300);
               }
        });
    });

    $('#action_bar').on('click', '.back', function(e){
        e.preventDefault();
        //alert('click');
        $('.items').fadeOut(300);
        $('.category').delay(400).fadeIn(300);
        $('#nav').html('CATEGORIES').removeClass();
    });
});
</script>

更新

我尝试在 fadeOut 中使用回调但没有成功。

       success: function(response){
           //console.log(response);
           $('.category').fadeOut(300, function(){
                $('#nav').html('Back').addClass('back');
                $('.items').html(response).delay(400).fadeIn(300);
           });
       }

Answer 1

看起来下面的工作正是我想要的方式。如果我写的代码确实有问题，请指正。

$(document).ready(function(){
    $('body').on('click', '.category', function(){
        var category = $(this).data('categories');
        //alert(category);
        $.when($('.category').fadeOut(500)).done(function(){
            //Try showing a loader
        });
        $.ajax({
               type: "POST",
               url: "./assets/listproducts.php",
               data: {cat: category},
               cache: false,
               success: function(response){
                   //console.log(response);
                        $('#nav').html('Back').addClass('back');
                        $('#content').append($('<ul class="items">').append(response)).delay(400).fadeIn(500);
               }
        });
    });

    $('#action_bar').on('click', '.back', function(e){
        e.preventDefault();
        $.when($('.items').fadeOut(500)).done(function(){
            $('.items').remove();
            $('#nav').html('CATEGORIES').removeClass();
            $('#content').append($('.category').css('display','block')).delay(400).fadeIn(300);
        });
    });
});
</script>