隱藏和顯示div只有兩個div在時間與動畫使用JQuery

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

希望它可以幫助... * 更改字體顏色以提高可讀性

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>

Answer 2

您可以將使用元素的jQuery的的length與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>