Question

我设置了这个分页，以便当用户点击下一个箭头（.paging-navigation a）时，当前的一组博客文章会淡出，新设置会淡入。有时新设置会有延迟加载，我想在那里插入一个加载gif，以便用户知道没有出错。

以下是我设置的方法：

$('#article-list').on('click', '.paging-navigation a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500);
    $('#article-list').fadeOut(500, function(){

        // I would like to put in the animation gif here
           and fade it away when the new set of posts
           fade in.

        $(this).load(link + ' #article-list', function() {
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
        });
    });
});

这是HTML：

<div id="news">
    <div id="article-list">
        <img class="loading-list" src="loading.gif" style="display:none">

        (blog posts here)

        <div class="paging-navigation">
            <div class="nav-previous">
                <a href="#">Prev</a>
            </div>
            <div class="nav-next">
                <a href="#">Next</a>
            </div>
        </div>

    </div>
</div>

我试图像这样显示/隐藏.loading-list img，但它没有工作：

$('#article-list').on('click', '.paging-navigation a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500);
    $('#article-list').fadeOut(500, function(){
        $('.loading-list').show();                                  <// added
        $(this).load(link + ' #article-list', function() {
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
        });
        $('.loading-list').hide();                                  <// added
    });
});

有人能帮助我吗？

此外，当第一组帖子淡出并且新帖子已准备好加载时，容器div的高度突然减少以解释内容不足，然后当新帖子淡出时高度向后移动in。有没有办法让div过渡的高度更平滑？

编辑：#article-list

的CSS

#news #article-list {
  overflow: hidden;
  text-align: center;
}

Answer 1

<div id="news">
<img class="loading-list" src="loading.gif" style="display:none">
    <div id="article-list">


        (blog posts here)

        <div class="paging-navigation">
            <div class="nav-previous">
                <a href="#">Prev</a>
            </div>
            <div class="nav-next">
                <a href="#">Next</a>
            </div>
        </div>

    </div>
</div>

脚本：

$('#article-list').on('click', '.paging-navigation a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500);
    $('#article-list').fadeOut(500, function(){
        $('.loading-list')[0].show();                                  <// added
        $(this).load(link + ' #article-list', function() {
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
        });
        $('.loading-list')[0].hide();                                  <// added
    });
});

只要您将图像移除一步就可以使用，您无法隐藏父级并让孩子保持可见。

编辑：选择类将返回一个节点列表，因此必须指定元素，或使用loading -list作为id而不是class。

编辑（2）

实际上我不知道您的源代码有什么问题，但是jquery hide和show对我来说不起作用。

然而这很有效：

document.getElementsByClassName("loading-list")[0].style.display="block";

所以新代码应该是：

$('#article-list').on('click', '.paging-navigation a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500);
    $('#article-list').fadeOut(500, function(){
         document.getElementsByClassName("loading-list")[0].style.display="block";;                                  <// added
        $(this).load(link + ' #article-list', function() {
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
        });
         document.getElementsByClassName("loading-list")[0].style.display="none";;                                  <// added
    });
});

Answer 2

修改，更新

尝试

V3

$('#article-list')
.on('click', '.paging-navigation a', function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500, "linear");
    $('#article-list *:not(img.loading-list)')
    .fadeOut({
        duration: 500,
        start: function (promise) {
            $("img.loading-list")
                .fadeIn(0); 
        }
    }).promise().done(function(el) {
        $(el).siblings("img.loading-list")
        .fadeOut(1500, function() {
           // substituted `e.target` for `this`
           $(e.target).load(link + ' #article-list', function() {
            $('#article-list *:not(img.loading-list)')
                .fadeIn(500);
           });
        })
    });
});

jsfiddle http://jsfiddle.net/guest271314/7mvrdzcj/

Answer 3

您需要将$('.loading-list').hide()移动到.load()的回调函数中。

$('#article-list').on('click', '.paging-navigation a', function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500);
    $('#article-list').fadeOut(500, function () {
        $('.loading-list').show();
        $(this).load(link + ' #article-list', function () {
            $('.loading-list').hide(); //moved here
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
        });
        //from here
    });
});

所以你展示了gif，开始加载新内容，然后当内容加载完成后，回调函数会隐藏gif并淡入新内容。

至于高度，您可以使用CSS transition来平滑更改。但由于您无法转换到height: auto，因此需要一种解决方法。类似的东西：

CSS：

#article-list {
    min-height: 0;
    -webkit-transition: min-height 0.5s;
    transition: min-height 0.5s;
}

JS（jQuery）：

$('#article-list').on('click', '.paging-navigation a', function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500);
    $('#article-list').css('min-height', 400); //change min-height here
    $('#article-list').fadeOut(500, function () {
        $('.loading-list').show();
        $(this).load(link + ' #article-list', function () {
            $('.loading-list').hide();
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
            $('#article-list').css('min-height', 0); //change min-height here
        });
    });
});

因此，在您开始淡出旧内容之前，您设置了min-height，因此div不会崩溃。当新内容开始淡入后，所以它已经填充了div的一些高度，你将min-height设置回0，允许转换平滑地将div缩小到新内容的高度。

如果某些内容不起作用，请告诉我，因为测试此代码对我来说有点困难。

元素淡出时添加加载gif，并在新元素淡入时删除它

3 个答案: