javascript - 如何加速淡入/淡出

Question

我使用以下代码每秒淡入/淡出图像，效果很好，但我想每 1/2 秒淡入和淡出图像。我可以将 setInterval 更改为 500，但这只会造成一些困惑。我显然需要重新调整淡入淡出。

我已经加载了 bootstrap，所以我猜这些函数是在 bootstrap js 中定义的，但是我该如何重新指定它们的时间？

var $els = $('div[id^=image]'),
    i = 0,
    len = $els.length;
var start = 1;
var end = 999999999999999;

jQuery(function () {    
    $els.slice(1).hide();
    spin = setInterval(function () {
        $els.eq(i).fadeOut(function () {
            i = Math.floor(Math.random() * len);
            $els.eq(i).fadeIn();
            });
        start = new Date().getTime();
        if (start > end) {
            clearInterval(spin);
            }
        }, 1000);

        {% for m in myusers %}
        if (i == {{ forloop.counter0 }}) { document.getElementById('name{{ forloop.counter0 }}').style.display = 'Block';}
        {% endfor %}

    });

Answer 1

既然你正在使用 jQuery，为什么不使用 fadeOut/fadeIn 或 fadeToggle？

$(document).ready(function() {
  setInterval(function() {
    $('.a1, .a2').stop().fadeToggle(500);
  }, 500);
});

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 1px;
  display: inline-block;
}

.a1,
.a2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.a2 {
  display: none;
  background-color: red;
}

.wrapper2 .a1 {
  display: none;
}

.wrapper2 .a2 {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="a1"></div>
  <div class="a2"></div>
</div>

<div class="wrapper wrapper2">
  <div class="a1"></div>
  <div class="a2"></div>
</div>