jQuery fadeIn fadeOut变量间隔

jQuery fadeIn fadeOut Variable Interval

本文关键字：变量 fadeOut fadeIn jQuery      更新时间：2023-09-26

我正在尝试创建一个淡出淡出动画，其中单个项目在屏幕上显示一个特定的间隔，但下一个项目的淡出和淡出之间的差距是不同的。

假设我们有一组图像，我希望这些图像在屏幕上显示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>

小提琴来了

setInterval()的一个问题是它不等待其中的代码完成。由于本例中的代码正好每五秒运行一次，因此它可能会更早地淡出图片，因为五秒间隔的一部分用于使图片不可见。如果图像之间的暂停也恰好是5秒，那么下面的图片将在下一次代码循环将其再次淡出之前变为可见。

使用我在这个答案中找到的一些帮助，我创建了一个循环函数，其中包含一些嵌套的settimeout，应该会给您一个工作结果。我还在removeclass函数上设置了一个小延迟，因为当它们同时运行时，它似乎会稍微干扰淡出。这里是新的javascript，也可以在这里找到一个更新的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();

经过评论的澄清，我认为这是你想要的。我们用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;
}

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

相关文章：