Question

在我的网站http://boxcomp.111mb.de/luxus/html9

上

我使用jquery隐藏内容直到加载，并在加载时淡入内容。这样看起来更清洁，更顺畅。我用AJAX加载内容。问题是，它不起作用。当连接速度很慢时，内容会在加载之前出现。不一定是这样的。这是我使用的代码：

<script>
$(document).ready(function() {
    $('#home').click(function() {
        $('#content-shown , #pics').animate({opacity: 0}, 250, function() {
            $('.content-loading').fadeIn(250, function() {
                $('#navigation_all , #content-shown').css("height", "1500px");
                $('#pics').load('content.html #home-bild').animate({opacity: 1}, 250);
                $('#content-shown').load('content.html #home', function() {
                    $('.content-loading').fadeOut(250, function() {
                        $('#content-shown').animate({opacity: 1}, 250);
                    });
                });
            });
        });
    });
});
</script>

当点击一个对象时，我淡出实际内容，在内容加载（但不可见）时淡入“请等待”文本（.loading）然后当加载内容时，.loading淡出并且内容淡入。但有时它会在所有内容完全加载之前出现。

我怎样才能确保它在加载时消失？

谢谢！

Answer 1

我唯一看到的就是这一行：

$('#pics').load('content.html #home-bild').animate({opacity:1},250);

您可能需要将animate函数移动到load的回调函数，而不仅仅是链接它。例如：

$('#pics').load('content.html #home-bild', function(){
  $('#pics').animate({opacity:1},250)
});

或改为使用opacity:'show'：

 $('#pics').load('content.html #home-bild', function(){
      $('#pics').animate({opacity:'show'},250)
    });

通过jquery加载时隐藏的东西不能正常工作

1 个答案: