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

Question

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

例子:

div1 - show();
div2 - 隐藏();

.... 3000 毫秒...

div1 - 隐藏();
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

使用 toggle() setInterval() 中的 View 。

$(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>