Javascript jQuery淡出淡出变量间隔

我试图创建一个fadein fadeout动画，其中单个项目在屏幕上以特定间隔显示，但活动项目和下一个项目的fadein fadeout之间的间隔不同

假设我们有一组图像，我希望图像在屏幕上显示5秒钟，当一个图像隐藏，下一个图像显示时，我希望每个间隔之间有一个可变的时间差

这是我尝试过的，但它没有像我需要的那样工作

<script>
var myVar = setInterval(function(){myTimer()}, 5000);

function myTimer() {
var $active = $('#cycler .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
      $active.fadeOut().removeClass('active');
      $next.delay(getRandomArbitary(5,20)*1000).fadeIn().addClass('active');
}

function getRandomArbitary (min, max) {
    return Math.random() * (max - min) + min;
}
</script>
<style>
#cycler{position:relative;}
#cycler img{position:absolute;display:none; max-width:250px;}
#cycler img.active{z-index:3; display:block;}
</style>

<div id="cycler">
     <img src="images/p1.jpg" class="active">
    <img src="images/p2.jpg">
    <img src="images/p3.jpg">
    <img src="images/p4.jpg">
 </div>

var myVar=setInterval（函数（）{myTimer（）}，5000）；
函数myTimer（）{
var$active=$（'#cycler.active'）；
var$next=（$active.next（）.length>0）？$active.next（）：$（“#cycler img:first”）；
$active.fadeOut（）.removeClass（'active'）；
$next.delay（getRandomArbitary（5,20）*1000）.fadeIn（）.addClass（'active'）；
}
函数getRandomArbitary（最小值、最大值）{
返回Math.random（）*（max-min）+min；
}
#循环器{位置：相对；}
#循环器img{位置：绝对；显示：无；最大宽度：250px；}
#循环器img.active{z-index:3；display:block；}

---

这里是

在从评论中澄清之后，我想这就是你想要的。我们在

getRandomArbitary

函数设置的随机间隔之后调用

fadeIn（）

只有javascript已被更改：

var myVar = setInterval(function(){myTimer()}, 5000);

function myTimer() {
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) 
        ? $active.next() 
        : $('#cycler img:first')
    ;
    $active.fadeOut().removeClass('active');
    var randDelay = getRandomArbitary(5, 1000);
    setTimeout( function(){
        $next.fadeIn().addClass('active');
    }, randDelay);
}

function getRandomArbitary( ratio, factor ) {
    var randInterval = Math.floor(Math.random() * ratio);
    return randInterval * factor;
}

下面是更新的fiddle:
setInterval（）的一个问题是它没有等待其中的代码完成。由于本例中的代码恰好每五秒钟运行一次，因此它可能会更早地淡出图片，因为五秒钟的时间间隔中有一部分用于使图片不可见。如果两个图像之间的暂停时间恰好为5秒，那么下面的图片将及时显示，以便下一个代码循环再次淡出

使用我在answer中找到的一些帮助，我创建了一个循环函数，其中包含一些嵌套的setTimeout，应该会给您一个工作结果。我还对removeClass函数做了一点延迟，因为当它们同时运行时，它似乎会稍微干扰淡出。这是新的javascript，也是一个更新的JSFIDLE

function loop () {
    var randDelay = getRandomArbitary(5, 1000);
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
    setTimeout(function(){
        $active.fadeOut();
        setTimeout( function(){
            $active.removeClass('active');
        }, 500);
        setTimeout( function(){ 
            $next.fadeIn().addClass('active');
            if (true) {
            loop();
        }
        }, randDelay + 500);
    }, 5000)
}

function getRandomArbitary ( ratio, factor ) {
    var randInterval = Math.floor(Math.random() * ratio);
    return randInterval * factor;
}

loop();

你说“有点不工作”是什么意思？我不明白你想达到什么目的，图像显示了5秒钟，然后循环到下一个。您希望图像之间的间隔是随机的吗？@Jongosi问题是，图像将在屏幕上保持5秒，但当一个图像隐藏而下一个图像显示时，隐藏/显示之间的差异是随机的。@NirmalRam确定，您的意思是隐藏/显示之间的差异需要是随机的吗？@Jongosi是，因此，图像在屏幕上停留5秒钟，然后隐藏，然后在动态时间间隔后显示下一个图像。这似乎起作用，但如果仔细观察，它没有正确执行。