如何使用褪色更改图像 [英] How to change image with fading
问题描述
我对js和jquery还是很陌生，我想用我的Rails应用程序做一些非常简单的事情:我想每3秒在2张图像之间切换，并具有淡入淡出的效果.当然，这个问题已经在StackOverflow上被问到了，但是不幸的是，我无法使其工作.
I'm quite new to js and jquery and I'm trying to do something very simple with my Rails app: I want to switch between 2 images every 3 seconds with a fading effect. Of course, this question was already asked on StackOverflow but I couldn't make it work for me, unfortunately.
我基于这两个问题徒然尝试:
I based my vain attempts on those two questions:
每隔几秒钟更改HTML页面中的图像(自动更改而不会褪色)
Change image in HTML page every few seconds (Automatic change without fade)
每n秒淡化更改图像(带有淡入淡出的自动更改)
fade changing image every n seconds (Automatic change with fade)
我设法使其能够自动更改，但没有任何褪色效果.这是我的代码:
I managed to make it work with an automatic change but without any fade effect. Here is my code for this:
HTML代码(位于视图页面中，例如index.html.erb)
HTML code (located in a view page, let's say 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文件的开头)
jquery code (located in the head of my application.html.erb file)
<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()">
For it to work, I changed the body tag from <body> to <body onload = "startTimer()">
使用前面的代码，我的图像每3秒自动更改一次.
With the previous code, I have an image that changes automatically every 3 seconds.
然后我尝试使用提供的第二个链接来实现淡入淡出效果，但没有成功.
I then tried to use the second link I provided to implement the fade effect, to no success.
HTML代码当然是相同的.
The HTML code is the same of course.
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标签中，但这也许是错误的.
It's really strange because I used the jsfiddle in the second link I provided to test my jquery code and it works perfectly there. I suspect there might be something wrong with my Rails app, maybe I didn't place the script in the right place? For now, it is in the head tag but maybe it's wrong.
我正在使用Rails 5.2.3，jquery-rails 4.3.5，jquery 3.2.1
I'm using Rails 5.2.3, jquery-rails 4.3.5, jquery 3.2.1
感谢您的任何帮助.
推荐答案
我最终使用了JQuery .animate函数，我想它也可能对您有用.
I ended up using JQuery .animate function and I guess it might also work for you.
这里是一个示例，说明了在更改图像控件的src属性时如何设法获得动画效果和淡入淡出效果:
Here is an example of how I managed to get the animation and fade effect done when changing the src attribute of the image control:
//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，动画再次开始播放.
希望这为您提供了如何使逻辑正常工作的想法.
Hope this give you a possible idea of how to get your logic working.
致谢，
这篇关于如何使用褪色更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
