0

有谁知道我做错了什么？

基本上，我将内容（图像）加载到 div 标签中，然后每 x 秒刷新一次。所以这就是我想出的，它工作得很好，直到它淡出它手动刷新的文件。

当前流程如下所示：

加载...淡出，淡入然后消失并在几秒钟后重新出现。

应该发生的情况如下：

加载......淡出，淡入......淡出，淡入......（你明白了，循环）

编码：

$(document).ready(function () {
     $("#webcam").load("image.html").fadeIn("slow");
   var refreshId = setInterval(function() {
      $("#webcam_img").fadeOut("slow");
      $("#webcam").load('image.html');
      $("#webcam_img").fadeIn("slow");
   }, 5000);
});

在线文件可以在这里找到：http ://colourednoise.co.uk/scripts/webcam.htm

谢谢

4

3 回答 3

3

尝试将您的淡入淡出移动到淡出的回调函数中，以便它先等到淡出完成

   $("#webcam_img").fadeOut("slow",function(){
      $("#webcam").load('image.html');
      $("#webcam_img").fadeIn("slow");   
   });

这是完整的例子

$(document).ready(function () {
   $("#webcam").load("image.html").fadeIn("slow");
   var refreshId = setInterval(function() {
      $("#webcam_img").fadeOut("slow",function(){ // <-- added callback function
         $("#webcam").load('image.html'); // now this
         $("#webcam_img").fadeIn("slow"); // and this waits for fadeOut to complete first  
      });
   }, 5000);
});
于 2012-12-13T20:40:05.657 回答
3

load是异步的。您正在调用fadeIn一个元素，然后将其替换为load. 您需要fadeIn在回调内load确保元素存在。

$("#webcam").load('image.html', function(){
    $("#webcam_img").fadeIn("slow");
});
于 2012-12-13T20:54:44.307 回答
1

这是一种稍微不同的方法，可确保在下一次刷新排队之前完全加载每个图像：

$(document).ready(function () {
    $("#webcam").load("image.html").fadeIn("slow", function () { setTimeout(refreshImage, 5000) });

    function refreshImage() {
        $("#webcam_img").fadeOut("slow",function(){
            $("#webcam").load('image.html');
            $("#webcam_img").fadeIn("slow", function() { setTimeout(appendDateToBody, 5000) });
        });
    }
});
于 2012-12-13T22:10:41.123 回答