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

-1

<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在一个时间，它应该在一个循环。隐藏和显示div只有两个div在时间与动画使用JQuery

来源

2016-09-15 Mannan Bahelim

一旦2 div可见，您希望其中一个隐藏而另一个隐藏？通过按钮点击什么？ – puneeth8994

我想使用setInterval（5000）来显示和隐藏div.and它应该是无限的。 –

在特定时间间隔后隐藏并显示，例如setTimeout（） –

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

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>

来源

2016-09-15 16:43:25

您可以将使用元素的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>

来源

2016-09-15 16:49:37 DaniP

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

回答

相关问题