Question

我使用以下代码每秒淡化/淡出图像效果很好，但我想每隔1/2秒淡入淡出图像。我可以将setInterval更改为500，但这只会造成一些混乱。我显然需要重新定义fadein和fadeout。

我已经加载了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

var box = document.getElementById('box');

function fadeOutIn(elem, speed ) {

if (!elem.style.opacity) {
    elem.style.opacity = 1;
} // end if

var outInterval = setInterval(function() {
    elem.style.opacity -= 0.02;
    if (elem.style.opacity <= 0) {
        clearInterval(outInterval);
        var inInterval = setInterval(function() {
            elem.style.opacity = Number(elem.style.opacity)+0.02;
            if (elem.style.opacity >= 1)
                clearInterval(inInterval);
        }, speed/50 );
    } // end if
}, speed/50 );

} // end fadeOut()

fadeOutIn(box, 2000 );

您好，请参阅我的解决方案。这是你的有用与否。感谢。

Answer 2

由于您使用的是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>

如何加快淡化/淡出

2 个答案: