Как сделать скользящие div в одной строке?

0

Я пытаюсь использовать два divs, которые находятся в одном контейнере. Когда я сдвигаю первый 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 слева направо с интервалами, сохраняя их в одной строке?

  • 1
    Я бы, вероятно, обернул их в контейнерный элемент div и разместил бы их абсолютно, при этом контейнерный элемент переполнен: скрыт на нем.
  • 0
    Мой контейнерный контейнер позиционируется абсолютно сам, в результате чего изменение расположения maindiv разрывает страницу!
Показать ещё 5 комментариев
Теги:

3 ответа

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;
  }

Необходимо назначить float слева и справа для ваших div и обернуть их в контейнер.

Поделиться
  • 0
    Не могу сделать это приятель. Поскольку контейнер является абсолютным, выполнение этого ломает страницу!
  • 0
    но это работает .... как вы хотите, чтобы это было?
Показать ещё 2 комментария
0

Попробуйте добавить float:left; к вашему классу css.

Поделиться
0

animate/show/hide - это какие-то асинхронные функции, divs не скрываются сразу после вызова divs.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 go
        showSomeDiv();
    });
Поделиться
  • 0
    Можете ли вы уточнить это немного подробнее? Я понимаю, что мне нужна задержка после того, как первый div скрыт, а второй показан. Как я могу это установить?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню