Javascript - 在计时器上更改幻灯片的 div 的内容，导致所有元素都被覆盖

Question

我有一个幻灯片，但想定期更改幻灯片的内容。

基于许多许多网站的相当标准的jQuery/css3，在Localhost上运行，我有...

    <script>
        $(function() {
            $("#slideshow > div:gt(0)").hide();
            var changeSlide = setInterval(function() {
              $('#slideshow > div:first')
                .fadeOut(500)
                .next()
                .fadeIn(500)
                .end()
                .appendTo('#slideshow');
            }, 2000);
            var reLoadMyData = setInterval(function() {
                $("#slideshow").load("data.xml");
            },5000);
        });
    </script>

重新加载后，所有（新的）divs彼此覆盖。但是，每2秒钟确实消失了一次 - 只是他们陷入不良状态。

• 如何解决叠加问题？我在加载data.xml之前/之后尝试过$("#slideshow > div:gt(0)").hide();，并尝试删除#Slideshow的所有子元素，但这没有效果。
• 是否有一种方法可以在Divs的"末端"处加载（），而无需第二个间隔（实际上有点混乱）？

Answer 1

如所述，对于覆盖问题，问题在于，加载完成后，您不会再隐藏新的Divs。为了实现这一目标，您需要在Load（）函数中添加隐藏动作。

$("#slideshow").load("data.xml", function(){
     // On load complete, do stuff
     $("#slideshow > div:gt(0)").hide();
});

另外，您可能需要将以下内容用作参考成功并显示一条消息，如果它未能

和我为在我以前的答案中误解这个问题

Answer 2

我相信.load不允许将数据附加到元素上。而是考虑使用$ .get

$('#slideshow').get("data.xml", function(data){
    // when load is complete append to element
    $("#slideshow > div:gt(0)").hide();
});