如何使用淡入淡出改变图像

Posted

技术标签:

【中文标题】如何使用淡入淡出改变图像【英文标题】：How to change image with fading 【发布时间】：2020-02-18 19:13:13 【问题描述】：

我对 js 和 jquery 还很陌生，我正在尝试用我的 Rails 应用程序做一些非常简单的事情：我想每 3 秒在 2 张图像之间切换，并带有淡入淡出的效果。当然，这个问题已经在 *** 上提出过，但很遗憾，我无法让它为我工作。

我的徒劳尝试是基于这两个问题：

Change image in html page every few seconds（不褪色自动变化）

fade changing image every n seconds（自动淡入淡出）

我设法让它通过自动更改工作，但没有任何淡入淡出效果。这是我的代码：

HTML 代码（位于视图页面中，比如 index.html.erb）

<div class="container p-5">
    <div class="row">
        <div class="col">
            <h2 class="display-5 mb-4">Title here</h2>
            <p class="lead">Lead</p>
        </div>
        <div class="col">
            <img id="img" src="http://localhost:3000/images/pdf_template.png" />
        </div>
    </div>
</div>

jquery 代码（位于我的 application.html.erb 文件的头部）

<script type = "text/javascript">
    function displayNextImage() 
        x = (x === images.length - 1) ? 0 : x + 1;
        document.getElementById("img").src = images[x];
    

    function startTimer() 
        setInterval(displayNextImage, 3000);
    

    var images = [], x = -1;
    images[0] = "http://localhost:3000/images/pdf_template.png";
    images[1] = "http://localhost:3000/images/watermark_template.png";
</script>

为了让它工作，我将 body 标签从 &lt;body&gt; 更改为 &lt;body onload = "startTimer()"&gt;

使用前面的代码，我有一个每 3 秒自动更改一次的图像。

然后我尝试使用我提供的第二个链接来实现淡入淡出效果，但没有成功。

HTML 代码当然是一样的。

jquery 代码

<script type = "text/javascript">
    var images = [];
    images[0] = "http://localhost:3000/images/pdf_template.png";
    images[1] = "http://localhost:3000/images/watermark_template.png";

    var x = 0;
    setInterval(displayNextImage, 3000);

    function displayNextImage() 
        x = x < images.length - 1 ? x : 0;
        $("#img").fadeOut(300, function()
          $(this).attr('src', images[x]).fadeIn(300);
        )
        x++;
    
</script>

这真的很奇怪，因为我在提供的第二个链接中使用了 jsfiddle 来测试我的 jquery 代码，它在那里完美运行。我怀疑我的 Rails 应用程序可能有问题，也许我没有将脚本放在正确的位置？目前，它在 head 标签中，但可能是错误的。

我正在使用 Rails 5.2.3、jquery-rails 4.3.5、jquery 3.2.1

任何帮助将不胜感激，谢谢。

【问题讨论】：

你的$(document).ready声明在哪里（或者$(document).on "turbolinks:load"如果你使用turbolinks）？查看Working with Javascript in Rails 上的指南可能会有所帮助。 嗯，我什么都没做（老实说，直到你评论它我才知道它是什么）。我只是在 google 上查找它，如果我理解正确，它表明该页面已准备好执行 javascript，并且此声明中的代码只会运行一次。我不明白它对我有什么帮助。你能启发我吗？感谢@jvillian 的回答。 @jvillian 经过一些研究，问题确实来自缺少$(document).ready 块。现在一切正常（我为此打开了另一个问题）。感谢您的帮助！ 【参考方案1】：

我最终使用了 JQuery .animate 函数，我想它也可能对你有用。

以下是我在更改图像控件的 src 属性时如何设法完成动画和淡入淡出效果的示例：

        //Refresh the thumbnail
        $(".photo-container").animate(
            opacity: 0.10,
        , 200, function () 
            $(".photo-info").attr("src", photo);
            ReloadGallery(currentContext); // Just showing extra logic can be use here...
        ).animate( opacity: 1 , 200);

它遵循三个步骤：

    通过将不透明度降低到 0.10 淡出照片容器 div。 在执行第一步的不透明度更改操作的 200 毫秒后执行回调函数。此函数负责更改图像的 src 属性并刷新图库或您需要做的任何其他事情。 通过将容器的不透明度恢复为 1 来再次启动动画。

希望这能让你对如何让你的逻辑工作有一个可能的想法。

问候，

【讨论】：

非常感谢，它现在正在处理您的答案。在我的情况下，我没有使用ReloadGallery(currentContext);。如果有人需要代码，请问我，我会在这里发布答案。 正确，在您的情况下不需要重新加载库，这只是我的示例的一部分，以显示额外的逻辑可以去那里。太好了！ 我第一次运行它没有任何问题，但现在即使我没有进行任何更改，它也不再工作了。我检查了 Web 控制台并看到了这个错误：TypeError: $("#img").animate is not a function. 我调查了一下，发现实际上这是我的问题的根源，我上面发布的代码给了我同样的错误。我为此开了一个新问题，如果你有 5 分钟的时间，你可以检查一下 :) 谢谢***.com/questions/58510588/… 我分享的代码的想法是将动画动作应用于包含图像控件的容器。这样你就可以将容器隐藏一点，然后改变 src 属性值，将容器的不透明度恢复正常。

以上是关于如何使用淡入淡出改变图像的主要内容，如果未能解决你的问题，请参考以下文章

平滑图像淡出，改变src，用jquery淡入

用 JQuery 慢慢改变/淡入淡出/动画改变图像

react, css) 淡入淡出的过渡 css，当背景图像用 className 改变时

滚动水平表视图时淡入淡出动画

如何在 Pygame 中淡入和淡出文本

当博客加载更多图像时，mouseover 和 mouseout 淡入淡出效果停止