Change one random image in a list

I would like to create a client's logo wall like this : http://ift.tt/NiJHMy scroll down until "TRUSTED BY THE WORLD’S BEST" section.

To create the same effect, I begin to generate a liste of 8 elements from an array : http://ift.tt/2uyhCrS

After that, I tried to change randomly ONLY ONE image : http://ift.tt/2uUAX8U

I don't know how to change only one random image ? And after add the little move effect to from the bottom to the top.

HTML

<div class="list-items"></div>

CSS

.list-items {
    max-width: 500px;
}

.item {
    display: inline-block;
    float: left;
    margin: 10px;
    height: 100px;
    width: 100px;
    line-height: 100px;
    background-repeat: no-repeat;
    background-size: cover;

    img {
        display: inline-block;
        width: 100%;
        height: auto;
        max-height: 100%;
        vertical-align: middle;
    }
}

JQUERY

// List //
var logos = ["http://ift.tt/2uyUWrk", "http://ift.tt/2uUFl8b", "http://ift.tt/2uyFrQ3", "http://ift.tt/2uUTvGl", "http://ift.tt/2uytE4a", "http://ift.tt/2uTXsew", "http://ift.tt/2uy0Zwh", "http://ift.tt/2uV52FC"];

// Generate 8 items //
var i;
for (i = 0; i < 8; ++i) {
    $(".list-items").append('<a href="" class="item"><img src="" alt=""></a>');
}

// Shuffle function //
function shuffle(o) {
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

logos = shuffle(logos);

// Push src in image tag //
$('.item img').each(function(i) {
    $(this).attr('src', logos[i]);
});

// Change image //
count = 0;
  setInterval(function () {
    count++;
    $(".item img").fadeOut(600, function () {
      $(this).attr('src', logos[count % logos.length]).fadeIn(600);
    });
 }, 5000);

The "Change image" part don't work like I would like, it change all the image while I would like one image after the other.