Как сохранить позицию 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> 

UPDATE

Я попытался с помощью обратного вызова в 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>