0

1 つのコンテナにある 2 つの div を使用しようとしています。最初の div を左にスライドして非表示にし、2 番目の div を表示して左にスライドすると、2 番目の 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;
  }

float を 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 に答える