0

我正在尝试使用在一个容器中的两个 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 保持在同一行的同时每隔一段时间从左向右滑动？

4

3 回答 3

0

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

于 2013-10-22T11:02:04.417 回答
0

试试这个 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 分配左右浮动并将它们包装在容器中。

于 2013-10-22T11:04:14.957 回答
0

animate/show/hide 是某种异步函数，调用 divs.hide('fast') 后不会立即隐藏 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();
    });
于 2013-10-22T11:08:59.973 回答