如何在Jquery中自动进行转换？

Question

我有2个div，div1和div2。只会显示一个div。每个3000毫秒一个div为hide();，另一个为show();。

示例：

div1 - show();
div2 - hide();

.... 3000miliseconds ...

div1 - hide();
div2 - show();

我试过这个......但没有成功。

$(function() {
  var div1 = $('.div1');
  var div2 = $('.div2');

  $(document).ready(function() {
    div1.show();
    div2.hide();
    setInterval(3000).ready(function() {
      div1.hide();
      div2.show();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="div1" style="border: 1px solid black">
  <div class="container">
    <div class="row">

      <div class="col-md-3 col-sm-6">
        <a>
                        Content of DIV1
                    </a>
      </div>
      <div class="col-md-3 col-sm-6">
        <a>
                        Content of DIV1
                    </a>
      </div>
      <div class="col-md-3 col-sm-6">
        <a>
                       Content of DIV1
                    </a>
      </div>
      <div class="col-md-3 col-sm-6">
        <a>
                         Content of DIV1
                    </a>
      </div>
    </div>
  </div>
</aside>

<aside class="div2" style="border: 1px solid black">
  <div class="container">
    <div class="row">

      <div class="col-md-3 col-sm-6">
        <a>
                         Content of DIV2
                    </a>
      </div>
      <div class="col-md-3 col-sm-6">
        <a>
                        Content of DIV2
                    </a>
      </div>
      <div class="col-md-3 col-sm-6">
        <a>
                         Content of DIV2
                    </a>
      </div>
      <div class="col-md-3 col-sm-6">
        <a>
                         Content of DIV2
                    </a>
      </div>
    </div>
  </div>
</aside>

Answer 1

在setInterval()中使用 toggle() 视图。

$(function() {
  var div1 = $('.div1');
  var div2 = $('.div2');

  $(document).ready(function() {
    div1.show();
    div2.hide();
    setInterval(function(){
      div1.toggle();
      div2.toggle();
    }, 3000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="div1" style="border: 1px solid black">
   <div class="container">
      <div class="row">
         <div class="col-md-3 col-sm-6">
            <a>
            Content of DIV1
            </a>
         </div>
         <div class="col-md-3 col-sm-6">
            <a>
            Content of DIV1
            </a>
         </div>
         <div class="col-md-3 col-sm-6">
            <a>
            Content of DIV1
            </a>
         </div>
         <div class="col-md-3 col-sm-6">
            <a>
            Content of DIV1
            </a>
         </div>
      </div>
   </div>
</aside>
<aside class="div2" style="border: 1px solid black">
   <div class="container">
      <div class="row">
         <div class="col-md-3 col-sm-6">
            <a>
            Content of DIV2
            </a>
         </div>
         <div class="col-md-3 col-sm-6">
            <a>
            Content of DIV2
            </a>
         </div>
         <div class="col-md-3 col-sm-6">
            <a>
            Content of DIV2
            </a>
         </div>
         <div class="col-md-3 col-sm-6">
            <a>
            Content of DIV2
            </a>
         </div>
      </div>
   </div>
</aside>