make an element change place and content while fading out

0
votes

This is my attempt at creating an element that seems like it's fading out to another location on the page seamlessly:

a part of my page's Jquery & CSS & HTML:

$(document).ready(function(){

                var numberX, numberY;

            jQuery("#reviewshow > div:gt(0)").hide();

                    setInterval(function() {
                      jQuery('#reviewshow > div:first')
                        .fadeOut(1000)
                        .next()
                        .delay(1000).fadeIn(1000)
                        .end()
                        .appendTo('#reviewshow');
                        setTimeout(function() {
                            numberX = Math.floor((Math.random()*70)+10);
                            numberY = Math.floor((Math.random() * 70) + 10);
                            document.getElementById("reviewshow").style.top = numberX + "%";
                            document.getElementById("reviewshow").style.left = numberY + "%";
                        },  1000)
                    },  3000);

            });
#reviewshow{
            position: absolute;
            z-index: 20;
            opacity: 0;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="reviewshow">
    <div id="reviewblock" style="background-color:red;position:absolute;" ><p id="name">name1<p /><br /><p id="txt">txt1<p /></div>
    <div id="reviewblock" style="background-color:blue;position:absolute;" ><p id="name">name2<p /><br /><p id="txt">txt2<p /></div>
</div>

the problem is that in order for the changing div to look good while transitioning, and not just teleporting, the process of it changing takes 2 seconds instead of 1. because of the flow of my site I need the fadeOut() and fadeIn() to stay on 1sec/1000. what I thought of doing is making 2 separate tables and while fading one out I can update the other's position while being hidden, make one appear and the other disappear, and again and again. problem is - when I tried to do that I kept running into problems as I'm still pretty new to Javascript.

can anyone give me a hand?

javascripthtmljquerycss