使用JQuery在動畫中一次僅隱藏和顯示div兩次

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

您可以使用元素的length和Jquery上的append()進行循環，如下所示：

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div><h1>this is div 1</h1></div> <div><h1>this is div 2</h1></div> <div><h1>this is div 3</h1></div> <div><h1>this is div 4</h1></div> <div><h1>this is div 5</h1></div> </div> 

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>