Javascript 如何在一行中使用滑动div？

我试图使用两个div，它们位于一个容器中。当我向左滑动第一个div并将其隐藏，同时显示第二个div并将其向左滑动时，第二个div被放置在第一个div的下方，从而破坏页面

HTML代码

<div id="mainhomediv" class="maindiv">

</div>

<div id="mainhomediv1" class="maindiv">

</div>

jQuery脚本

$(function(){
    var counter=0;
    var divs=$('#mainhomediv,#mainhomediv1');
    function hideDiv(){
        divs.show().animate({'left': '-100%'},1000);
        divs.hide('fast');
        counter++;
    }
    function showDiv(){
        divs.filter(function(index){return index==counter%2;})
        .show('fast').animate({'left': '0%'},1000);
    }

    setInterval(function(){
        hideDiv();
        showDiv();
    },5*1000);
});

---

如何将每个div从左向右滑动，同时保持在同一行上？

尝试添加

float:left到你的css类。
试试这个


左div
右分区
#主播{
浮动：左；
}
#主家庭部1{
浮动：对；
}

需要将float left和right分配给div，并将它们包装在一个容器中。
animate/show/hide是一种异步函数，div不会在调用div之后立即隐藏。hide（'fast'），那里有一个回调

divs.hide('fast', function(){
  //here the divs is hide
});

因此，如果要隐藏->显示，请将显示移动到隐藏的回调中

我不确定这是否是您想要的，但请尝试：

    $(function() {

        var counter = 0;
        var divs = $('#mainhomediv,#mainhomediv1');

        //make both left side
        divs.css({
            'left' : '-100%'
        });

        function showSomeDiv() {

            //the div to show
            var ds = divs.eq(counter % 2);

            //the div to hide
            var dh = divs.eq((counter + 1) % 2);

            dh.hide('fast', function() {

                //make it left side
                dh.css({
                    'left' : '-100%'
                });

                //slide ds out
                ds.show().animate({
                    'left' : '0%'
                }, 1000, function() {

                    counter++;

                    //do it again
                    setTimeout(showSomeDiv, 1000);
                });

            });
        }

        //Let's go
        showSomeDiv();
    });

我可能会将它们包装在一个container div中，并让它们绝对定位，container div上有overflow:hidden。我的container div是绝对定位的，因此更改maindiv的位置会破坏页面！您的maindiv类不也需要是绝对的吗？maindiv在容器中。我已将两者都设置为绝对值。这就是页面的结构。看看你的CSS，它表明.maindiv是相对定位的。不能这样做。由于容器是绝对的，这样做会破坏页面！我知道，兄弟。你刚才给我看的小提琴确实有用。但是，当我尝试将浮点分别分配到左侧和右侧时，它会破坏页面！添加溢出：隐藏到你的容器中。你能详细说明一下吗？我知道在隐藏第一个div和显示第二个div之后需要延迟。我怎样才能确定这一点？
divs.hide('fast', function(){
  //here the divs is hide
});

    $(function() {

        var counter = 0;
        var divs = $('#mainhomediv,#mainhomediv1');

        //make both left side
        divs.css({
            'left' : '-100%'
        });

        function showSomeDiv() {

            //the div to show
            var ds = divs.eq(counter % 2);

            //the div to hide
            var dh = divs.eq((counter + 1) % 2);

            dh.hide('fast', function() {

                //make it left side
                dh.css({
                    'left' : '-100%'
                });

                //slide ds out
                ds.show().animate({
                    'left' : '0%'
                }, 1000, function() {

                    counter++;

                    //do it again
                    setTimeout(showSomeDiv, 1000);
                });

            });
        }

        //Let's go
        showSomeDiv();
    });