How to speed up fadein / fadeout

I'm using the following code to fadein/fadeout images every second which works fine but I would like to fade the images in and out every 1/2 second. I can change the setInterval to 500 but this simply causes a bit of a mess. I clearly need to redfine fadein and fadeout.

I have bootstrap loaded so I'm guessing the functions are defined within the bootstrap js but how do I respecify their timing?

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 %}

    });

---

既然你使用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>

---

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

Hello please see my solution . It is your helpful or not. Thanks.

链接地址: http://www.djcxy.com/p/64766.html

上一篇: Jetty和Netty有什么区别？

下一篇: 如何加快淡出/淡出