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>

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

1 个答案: