javascript run a function multiple times at the same time with different values

So I'm trying to randomly select different images from my html that are currently hidden with css and make them slide from one side to the other and disappear,this animation should keep working until the user clicks a stop button. I managed to make it work for a single image at the time, but I can not seem to figure out how to make it work for multiple images at the same time. As when a "slide()" is called again the function that slides the image is still sliding the last image, so it leaves the last image frozen and goes with the new one. So how can I make it so the function "moveIt()" finishes sliding the image but also accepts and slides a new image at the same time?

Newbie here, hope that wasn't too confusing!

function slide() {

    randomImage();
    var top = Math.floor((Math.random() * 100) + 1);
    $("#" + image).css('top', top + '%');
    $("#" + image).css('display', 'inline');
    moveIt();
    mar = -25;
    ana = setTimeout(slide, 1000);
}
var imagesright = ['f1r', 'f2r', 'f3r', 'f4r', 'f5r', 'f6r', 'f7r', 'f8r', 'f9r', 'f10r'];
var imagesleft = ['f1l', 'f2l', 'f3l', 'f4l', 'f5l', 'f6l', 'f7l', 'f8l', 'f9l', 'f10l'];
var mar = -25;
var a = "";
var image = "";

function randomImage() {
    image = imagesright[Math.floor((Math.random() * 10))];
}

function moveIt() {
    if (mar > 100) {
        stopIt();
    } else {
        mar = mar + 0.3;
        $("#" + image).css('margin-left', mar + "%");
    }
    stopmoveIt = setTimeout(moveIt, 10);
}

function stopIt() {
    clearTimeout(stopmoveIt);
}