Question

<div id="container">
                    <div id='div1' style="display:none;" class='cssdiv1'> 
                      <!-- content -->
                      <h1 style='color:#FFF7F7'>this is div 1 </h1>
                    </div>
                    <div id='div2'  style="display:none;" class='cssdiv2'> 
                      <!-- content -->
                      <h1 style='color:#FFF7F7'>this is div 2 </h1>
                    </div>
                    <div id='div3' style="display:none;" class='cssdiv3'> 
                      <!-- content -->
                      <h1 style='color:#FFF7F7'>this is div 3 </h1>
                    </div>
</div>

我有一个要求，我想一次只显示两个div，它应该在一个循环中。

Answer 1

您可以使用元素的reference_ts = pd.to_datetime("2016-09-15 00:00:00") df1 = df[df.my_ts >= reference_ts - pd.Timedelta(days=14)]和Jquery上的length循环，如下所示：

＆＃13;

append()

＆＃13;

$(document).ready(function(){
  var toloop = $('#container > div'),
      end    = toloop.length-1,
      start  = 0;
  toloop.eq(start).fadeIn(1000,shownext);
  function shownext() {
    start < end ? start++ : start=0;
    toloop.eq(start).fadeIn(1000);
    setTimeout(function(){
      toloop.eq(start).prev().slideUp(800,function(){
        $('#container').append($(this))
      });
      shownext();
    },2000)
  }
})

＆＃13;

#container > div {
  width:90%;
  margin:0 auto;
  padding:10px 20px;
  background:purple;
  color:white;
  display:none;
}

＆＃13;

Answer 2

希望它有所帮助.... * 更改字体颜色以提高可读性

var counter = 1

function toggleVisibility() {
  $("#div1, #div2, #div3").hide()
  $("#div"+ counter +", #div"+(counter+1)).fadeIn(500)
  if(counter < 2)
    counter++
  else
    counter--
}

toggleVisibility()
setInterval(toggleVisibility, 5000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id='div1' style="display:none;" class='cssdiv1'> 
    <!-- content -->
    <h1 style='color:#323232'>this is div 1 </h1>
  </div>
  <div id='div2'  style="display:none;" class='cssdiv2'> 
    <!-- content -->
    <h1 style='color:#323232'>this is div 2 </h1>
  </div>
  <div id='div3' style="display:none;" class='cssdiv3'> 
    <!-- content -->
    <h1 style='color:#323232'>this is div 3 </h1>
  </div>
</div>

使用JQuery在动画中隐藏和显示div只有两个div

2 个答案: