How to speed up fadein / fadeout

Question

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

    });

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

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

Answer 2

Since you are using jQuery, why not use fadeOut / fadeIn or 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>