如何使用Jquery对同一位置的不同图像进行淡入淡出？

Question

我有五个图像。 就像标题徽标一样。 我想显示那些图像，例如第一个图像应淡出，然后第二个图像应显示在同一位置，然后显示第三个图像，然后再显示第一个图像。 它应继续淡入淡出。

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新手，谢谢

Answer 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/以了解其工作原理

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