Question

主页中有3个图像被隐藏。所以我想尝试的是我想在那里显示3张图像，但有一些延迟。

前图像1 fadein为1500，淡出为1000.当图像1淡出时，图像2为fadein。

问题

显示3张有一些延迟的图片
并且在3张图片之后进行预览，老化循环应该从开始图片1.（不断想要跑步）

HTML

<div class="slides">
    <div class="set1" id="1">
        <img src="image/slider/Image.png" width="950px">
    </div>
    <div class="set2" id="2">
        <img src="image/slider/Image.png" width="950px" >
    </div>
    <div class="set3" id="3">
        <img src="image/slider/Image.png" width="950px">
    </div>
</div>

的JavaScript

    <script type="text/javascript">
        $(function()
        {
            var i;
            for (i = 1; i < 4; i++)
            {
                $('#'+ i).fadeIn('4000', function () {
                    $(this).delay(4000).fadeOut('4000');
                });
            }
        });
    </script>

的CSS

.set1
{
    bottom: 0px;
    left: 0px;
    position: absolute;
    float: left;
    width: 100%;
    display: none;
}
.set2
{
    bottom: 0px;
    left: 150px;
    position: absolute;
    float: left;
    width: 100%;
    display: none;
}
.set3
{
    bottom: 0px;
    left: 250px;
    position: absolute;
    float: left;
    width: 100%;
    display: none;
}

Answer 1

尝试使用jQuery动画回调和setTimeout：

var sets, index = 0; //track current set
var slider = function() {
  sets.eq(index).fadeIn(1500, function() { //fade in callback
    $(this).fadeOut(1000, function() { //fade out callback
      index = (1 + index) % sets.length; // get the next set
      setTimeout(slider, 0); // loop animation
    });
  });
};
$(function() {
  sets = $('div[class^=set]'); // cache all sets
  slider(); //start animation
});

.set1 {
  bottom: 0px;
  left: 0px;
  position: absolute;
  float: left;
  width: 100%;
  display: none;
}
.set2 {
  bottom: 0px;
  left: 150px;
  position: absolute;
  float: left;
  width: 100%;
  display: none;
}
.set3 {
  bottom: 0px;
  left: 250px;
  position: absolute;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="slides">
  <div class="set1" id="1">
    <img src="http://creationwiki.org/pool/images/0/0f/Person.png" width="100px">
  </div>
  <div class="set2" id="2">
    <img src="http://png-3.findicons.com/files/icons/1743/ecqlipse/128/user.png" width="100px">
  </div>
  <div class="set3" id="3">
    <img src="https://cdn4.iconfinder.com/data/icons/dot/128/man_person_mens_room.png" width="100px">
  </div>
</div>

Answer 2

使用此功能

function doStuff (i) {
   i = i || 0; // in case you called the function first time without arguments
   $('#'+ i).fadeIn('4000', function () {
       $(this).delay(4000).fadeOut('4000');
   });
   if (i<4) {
       setTimeout(function () { 
            doStuff(i+1);
       }, 1000);
   }
}

setTimeout的第二个参数是您希望在操作之间等待的时间

Answer 3

使用css3关键帧和动画的非js解决方案

https://jsfiddle.net/m95tztc7/1/

<div class="box b1 fadeInOut">
    <img src="IMAGE SOURCE"/>
</div>
<div class="box b2 fadeInOut">
    <img src="IMAGE SOURCE"/>
</div>
<div class="box b3 fadeInOut">
    <img src="IMAGE SOURCE" />
</div>

@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0;}  
}

.box{
    height:100px;
    width:100px;
    opacity:0;
    position:absolute;
}

img{
    width:100%;
}



.fadeInOut.b1{
    animation : fade 6s infinite;
    }


.fadeInOut.b2{
    animation : fade 6s infinite;
    animation-delay : 2s
    }

.fadeInOut.b3{
    animation : fade 6s infinite;
    animation-delay : 4s
    }

Answer 4

试试这个..

$(function()
{
    var i;
    for (i = 1; i < 4; i++)
    {
        $("#1, #2, #3").hide().each(function(i) {

          $(this).delay(i*4000).fadeIn(4000);
        $(this).delay(i*4000).fadeOut(4000);
    });
    }
});

如何延迟fadeIn和fadeOut

4 个答案: