Question

我正在尝试创建一个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>

这是the fiddle

Answer 1

setInterval（）的一个问题是它不会等待其中的代码完成。由于这种情况下的代码恰好每五秒运行一次，因此可能会提前淡化图片，因为五秒间隔的一部分会使图片不可见。如果图像之间的这种暂停恰好是5秒钟，则下面的图片将在下一个代码循环中变得可见，以便再次淡出。

使用我在this回答中找到的一些帮助我创建了一个循环函数，其中包含一些嵌套的setTimeouts，它们可以为您提供工作结果。我还对removeClass函数稍作延迟，因为它们在同时运行时似乎会轻微干扰fadeOut。这是新的javascript，也发现here作为更新的jsfiddle。

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();

Answer 2

在评论澄清之后，我认为这就是你所追求的。我们在fadeIn()函数设置的随机间隔后调用getRandomArbitary，我已修改了该函数。

只有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;
}

这是更新的小提琴：http://jsfiddle.net/6cPHh/27/

jQuery fadeIn fadeOut变量间隔

2 个答案: