Question

我正在尝试使用两个div在一个容器中。当我向左滑动第一个div然后隐藏它，同时显示第二个div并向左滑动时，第二个div放在第一个div下方，从而打破了页面。

HTML代码

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

</div>

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

</div>

CSS代码

.maindiv{
    min-height: 60%;
    max-height: 60%;
    text-align: center;
    background-color: #435A43;
    -moz-box-shadow: inset 2px 2px 30px #001A00;
    -webkit-box-shadow: inset 2px 2px 30px #001A00;
    box-shadow: inset 2px 2px 30px #001A00;
    position: relative;
}

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，同时保持它们在同一条线上？

Answer 1

尝试将float:left;添加到您的css类。

Answer 2

试试这个 http://jsfiddle.net/k4899/

 <div class="container">
 <div id="mainhomediv" class="maindiv">
      left div
  </div>

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

 </div> 



#mainhomediv{
  float:left;    
 }
  #mainhomediv1{
   float:right;
  }

需要将div左右分配给div并将它们包装在容器中。

Answer 3

animate / show / hide是某种异步函数，div在调用divs.hide（'fast'）后不会立即隐藏，那里有回调函数。

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

所以，如果你想隐藏 - ＆gt; show，将节目移动到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();
    });

如何在一行中滑动div？

3 个答案: