如何使用Jquery在同一个地方淡入和淡出不同的图像？答案

【问题标题】：How to make fade in and fade out for different images in same place using Jquery?如何使用Jquery在同一个地方淡入和淡出不同的图像？
【发布时间】：2016-10-24 10:43:43
【问题描述】：

我有五张图片。这就像标题标志。我想显示那些图像，例如第一张图像应该淡出，然后第二张图像应该显示在同一个地方，然后是第三张图像，然后是第一张图像。它应该保持淡入淡出。

html代码：

<div id="slideshow">
    <div>
      <img id="img1" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/>
    </div>
    <div>
      <img id="img2" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/> 
    </div>
    <div>
      <img id="img3" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/> 
    </div>
</div>

jquery 代码

$(document).ready(function () {
        $("#slideshow > div:gt(0)").hide();

        setInterval(function () {
            $('#slideshow > div:first')
              .fadeOut(1000)
              .next()
              .fadeIn(1000)
              .end()
              .appendTo('#slideshow');
        }, 3000);
    })

当我首先尝试此代码时，它会在三行中显示所有图像，然后逐个淡出，当它第二次执行时，第一张图像进入第二行，然后在第一行中淡入第二张图像，就像它正在工作一样。

我希望第一张图片淡出，然后第二张图片淡入，然后是第三张图片。

我是 Jquery 新手，谢谢

【问题讨论】：

请展示一些相关的CSS。
@Dario 这张图片的 css 中没有代码
试试css img{transistion:all 0.8s ease-in-out forwards;}

标签： javascript jquery html css image

【解决方案1】：

只需将您的 HTML 更改为具有以下内联 CSS。

<div id="slideshow" style="margin:50px auto;position:relative; width:400px; height:250px; padding:10px;">
    <div>
      <img id="img1" src="http://lorempixel.com/400/250/" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/>
    </div>
    <div>
      <img id="img2" src="http://lorempixel.com/400/250/sports" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div>
    <div>
      <img id="img3" src="http://lorempixel.com/400/250/animals" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div>
</div>

查看https://jsfiddle.net/u15qvgdd/ 了解其工作原理

【讨论】：

【解决方案2】：

$(function() {
    // match all divs with ID starting with 'photo'
    $("div[id^=photo] > img").hide();
    setTimeout(function(){
       $("div[id^=photo]").each(function() {
           var rand = Math.floor(Math.random() * $(this).children().length);
           $(this).find('img:eq(' + rand + ')').fadeIn();
       });
    }, 500);       
});

【讨论】：

它不像你想象的那样工作。我设置了 id="photo1", photo2 和 photo3。