元素淡出淡入时如何保持DOM位置答案

【问题标题】：How to maintain the DOM position when elements are faded out and faded in元素淡出淡入时如何保持DOM位置
【发布时间】：2016-06-25 16:42:52
【问题描述】：

我试图在单击特定类别时隐藏类别列表并加载相应的内容。加载、淡入和淡出工作正常，但问题是，每当我淡出 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>

<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);
           });
       }

【问题讨论】：

如果你能用你提供的 sn-ps 做一个 JSFiddle 那就太好了。
我认为这不会有任何帮助，因为获取的数据来自 php 脚本。我可以做一个粘贴。
或者你可以做this
发生这种情况是因为淡出元素仍然存在，直到它完全淡出。因此，在过渡时间，它们都占用了一段时间的空间。这可以通过使用absolute 位置放置两个 div 来避免。如果这不可能，您可以先淡出一个 div，然后在回调中，即当淡出完成时，然后在另一个 div 上调用 fadeIn。
@Mohit Bhardwaj 你能举个例子吗？

标签： javascript jquery html css scroll

【解决方案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>

【讨论】：