javascript - 通过jquery加载时隐藏东西不起作用propper

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函数移动到加载的回调函数，而不仅仅是链接它。例子：

$('#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)
    });