Question

我对js和jquery还是很陌生，我想用我的Rails应用程序做一些非常简单的事情：我想每3秒在2张图像之间切换，并具有淡入淡出的效果。当然，这个问题已经在StackOverflow上问过了，但是不幸的是，我无法使其工作。

我基于这两个问题徒然尝试：

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标签从<body>更改为<body onload = "startTimer()">

使用前面的代码，我的图像每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

谢谢您的任何帮助。

Answer 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);

它遵循3个步骤：

通过将不透明度减小到0.10淡出照片容器div。
在第一步的不透明度更改动作持续200毫秒后执行回调函数。此功能是负责更改图像的src属性并刷新图库或其他您需要执行的操作的功能。
通过将容器的不透明度恢复到1，动画再次开始播放。

希望这为您提供了如何使逻辑正常工作的想法。

致谢，

如何用褪色更改图像

1 个答案: