Ajax fadein ipcam 图片（平滑交叉）答案

【问题标题】：Ajax fadein ipcam pictures (smooth crossover)Ajax fadein ipcam 图片（平滑交叉）
【发布时间】：2015-07-30 22:01:52
【问题描述】：

我真的需要你的帮助。不幸的是，我的脚本技能非常有限。我正在运行一个足球博客，我们刚刚安装了我们的网络摄像机。除了一件小事外，我一切正常：我想在这个网页上进行平滑的图片交叉： http://www.blickpunkt-muenster.de/webcams/webcam-6.php

我已经通过 ajax 请求解决了嵌入问题，但我无法让 fadeIn 函数正常工作，尽管我已经搜索了很多。希望你能帮助我。会很棒！！！

我的博客：http://bwa-blog.de/bwacam/

我的脚本：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>
            $(function () {
                window.setInterval(function () {
                    var path = 'http://bwa-blog.de/bwacam2/ipcam.jpg?' + (new Date()).getTime();
                    $('#demo').attr('src', path);
                }, 10000);
            });
        </script>
    </head>
    <body>
        <img id="demo" src="http://bwa-blog.de/bwacam2/ipcam.jpg"/>
    </body>

【问题讨论】：

如果您想要从一张图像平滑过渡到另一张图像，您将不得不使用两个单独的元素。尝试使用常规的淡入淡出动画来解决这个问题。更改 src 将始终在下载时立即更改图片。因此，首先在一个元素中加载一个图像，然后在另一个元素中加载另一个图像，然后在加载时将旧图像淡出，将新图像淡入。
感谢您的回答。现在我从stackoverflow.com/questions/1386374/…（上一篇）测试了脚本，问题是我不知道如何调用实际的图片。脚本加载图片，然后开始幻灯片放映，而不是将新图片添加到幻灯片中......

标签： jquery ajax fadein fadeout

【解决方案1】：

成功了。唯一的问题是第一次刷新不是覆盖，而是完全淡出和淡入。如果有人知道如何解决这个问题，我会很高兴:)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>/*<![CDATA[*/
     $(function () {
                window.setInterval(function () {
                    var path = 'http://bwa-blog.de/bwacam2/ipcam.jpg?' + (new Date()).getTime();
                    $('#demo').attr('src', path);
                }, 10000);
            });/*]]>*/
                 </script>

    <script> /*<![CDATA[*/
$(document).ready(function() {
    $(".featured > div:gt(0)").hide();

    setInterval(function() {
        $('.featured > div:first').fadeOut(2000, function() {
            $(this).appendTo('.featured');
        }).first().fadeIn(2000);
    }, 10000);
});/*]]>*/
</script>

  .featured > div {
   position: absolute !important;
width:1170px;
margin-top:0px !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featured">
<div id=one> <img id="demo" src="http://bwa-blog.de/bwacam2/ipcam.jpg" style="border: 1px solid #BABABA;"> </div>
<div id=one> <img id="demo" src="http://bwa-blog.de/bwacam2/ipcam.jpg" style="border: 1px solid #BABABA;"> </div>

【讨论】：